Im using ng-class to apply the class active when collapseSidebar is set to true revealing my sidebar.
<div class="row full-height row-offcanvas row-offcanvas-left" ng-class="{active: collapseSidebar}">
<div id="sidebar" class="col-sm-4 col-md-3 col-lg-3 col-xl-2 sidebar-offcanvas">
</div>
js
$scope.collapseSidebar = false;
$scope.select = function(thing)
{
$scope.selectedThing = (thing !== $scope.selectedThing) ? thing : null;
$scope.collapseSidebar = true;
};
However the sidebar can be hidden in other ways (click a menu icon in the top left) removing the class active. When I call select(thing) I was hoping that ng-class would be re-evaluated and the class 'active' would be re-applied, however this does not happen, I have tried setting it to false and then straight back to true which also didn't work.
How can I get ng-class to re-evaluate collapseSidebar and apply 'active' even if the value is the same as be
Have you tried:
ng-class="{'active': collapseSidebar}"
(The active class name is wrapped by the "'" characters)
Related
My app has a SLIDER and a Toggle Option, inside a Tabbed screen using AngularJS.
The problem is this. While the application and functionality work, when you load the page, when you go to another Tab, and come back, you can see both options on Browse with, and the slider disappears.
I found that if I remove the changes.paging.currentValue from the if statement, it will work. But the problem is this. What if the .length comes back undefined or null. It will throw an error.
How should I solve this?
HTML Code, in the Angular Component:
<div class="col-lg-7 col-md-7 col-sm-6 hidden-sm hidden-xs" ng-show="$ctrl.paging">
<span class="ml10 pl0">
<a class="pull-left f10 m10" ng-repeat="item in $ctrl.paging track by $index" ng-hide='item.type===$ctrl.parameters.type'
ng-click="$ctrl.changeBrowsingType(item, $ctrl.parameters.partition.id)">Browse with {{item.label}}</a>
<rzslider ng-if="$ctrl.parameters.type === $ctrl.browsingType.OPTION1" rz-slider-model="$ctrl.parameters.start"
rz-slider-options="$ctrl.slider.options" class="custom-slider"></rzslider>
<rzslider ng-if="$ctrl.parameters.type === $ctrl.browsingType.OPTION2" rz-slider-model="$ctrl.timestampStart"
rz-slider-options="$ctrl.slider.options" class="custom-slider"></rzslider>
</span>
</div>
The problematic function in the controller:
const onChangesFn = (changes) => {
if (changes.paging.currentValue && changes.paging.currentValue.length) {
ctrl.paging = changes.paging.currentValue;
**...more code functionality**
};
**....more code here**
}
};
Thanks for your time.
I have a side menu in which i am displaying the menu headers from a for loop. I would like:
first menu item expanded on page load
expanded item to be highlighted (same background as when i hover)
only allow one menu item to expanded at a time. when expanding a menu header - ensure the previous expanded header is collapsed.
I am using the "aria-expanded" attributed in my anchor tag as a condition for my functionality but i am not getting consistent results as expecting.
Here is my HTML:
<div *ngFor="let item of items; let currIndex = index">
<header>
<a data-toggle="collapse" aria-expanded="false" [attr.aria-controls]="item.id" [attr.data-target]="'#'+item.id" (click)="toggleHeader(item.id, $event, currIndex)">
<span>{{item.name}}</span>
<span *ngIf="item.isActive" [ngClass]="ariaExpanded ?'chevronDown':'chevronUp'"></span>
</a>
</header>
<ul *ngIf="item.isActive" class="collapse" [id]="item.id" data-toggle="buttons">
<li>....</li>
<li>....</li>
</ul>
</div>
This is my Typescript component:
public ariaExpanded: boolean;
public currentIndex: number;
public toggleHeader(id: number, event: any, currIndex: number){
let header = this.arrayOfItemsData.filter((item)=> item.id === id)[0];
if(header){
header.isCollapsed = !header.isCollapsed;
}
this.currentIndex = currIndex;
this.ariaExpanded = event.currentTarget.attributes["aria-expanded"];
}
Here is a link for a demo: https://stackblitz.com/edit/angular-uihbx6
Not sure why it isn't toggling list on click in this demo.
Since you are looping if you click the button it is showing all the button as active. if you want to avoid that add new property inside your data exaple i have added click.
So you can toggle using this variable and you can show the active state easily by using this value..
Check the exaple now if you click it will https://stackblitz.com/edit/angular-multi-toggle
I am new to front-end. Now, Here I have 3 divs which will be on the same page.and the position will also be same. it is like toggling .
So at the start this will be the div that I will show
<div text-angular id="htmlEditorId" >Abc</div>
then there is button whick is like
<button class="col-xs-3 btn btn-default" ng-click="changeTab()">NextTab </button>
On click of that button
<div text-angular id="secon">abcd</div>
this div should be shown and not the previous one.
And on again click of that button a third div
<div text-angular id="third">azzzbcd</div>
this should be seen and again on click first one should show . Its like a round robin fashion .
Now what I tried is using ng-show and ng-if. Can any one help me with this?
$scope.changeTab = function() {
$scope.showfirst = true;
$scope.showsecond = false;
}
It's quite simple, you can do it in many ways, for example:
In the controller
Define a scoped variable (bindable with the front-end)
$scope.showView = "firstView"
Define also a function:
$scope.changeView = function(value) {
$scope.showView = value;
}
In the html page define your divs and button
<button ng-click="changeView('secondView')">Chage View</button>
<div ng-show="showView == 'firstView'">abcd</div>
<div ng-show="showView == 'secondView'">abcd</div>
Hello I am facing problem to make Li as Active tab, I already add hover effect but How to add Active tab?. I user Angular's ng-show and ng-hide to change icon in li. Here is my code
<li ng-mouseenter="show = true" ng-mouseleave="show = false" id="home">
<img src="images/home.png" ng-hide="show" class="whiteClass" />
<img src="images/home_h.png" ng-show="show" class="blackClass"/>
</li>
How can i make it as active tab using ng-click??
Thanks in advance
Update :
<li ng-mouseenter="liMouaeEnter()" ng-mouseleave="liMouseLeave()" id="issuesLi" ng-click="navbarclick($event , issueTab)">
<img src="images/issues.png" ng-class="{'active': !isActive, 'inactive': isActive}"/>
<img src="images/issues_h.png" ng-class="{'active': isActive, 'inactive': !isActive}"/>
</li>
Here jS file on controller
var navClickBool = false;
$scope.liMouaeEnter = function(){
$scope.isActive = false;
this.isActive = true;
navClickBool = false
}
$scope.navbarclick = function(event , template){
$scope.isActive = false;
this.isActive = true;
navClickBool = true
}
$scope.liMouseLeave = function(){
if(navClickBool){
return
}
this.isActive = false;
}
If you need to toggle a class on an element, not only show/hide it, you can use ng-class instead of ng-hide/ng-show. ng-class automatically adds/removes a class based on the truth value of a $scope variable. You can toggle that truth value on ng-click (that automatically binds the onClick event to the DOM node, just like on-mouseenter binds onMouseenter).
<div ng-init="isActive = false">
<div ng-click="isActive = !isActive " ng-class="{'active': isActive}">
<em>Foo</em>
</div>
</div>
You now only have to write the .active { } CSS rule.
Also, you can add multiple rules on ng-class
ng-class="{'active': isActive, 'inactive': !isActive}"
and this will work as expected (switching between the two classes).
Note that I'm using ng-init to initialize my Boolean to false. You can also initialize it directly in the controller ($scope.isActive = false;).
I would like to add a class to the outer (parent) container based on the content of a child container. I am able to add a class to the child container based on its content, but If I try to add the class to the parent container, it does it to all of the containers on the page instead of just the current container. Could someone help me update my code so that it only adds the class to the parent container and not all containers that share the same class? Thanks.
jQuery:
$('div.promotion-type').each(function () {
var promotion = $(this).html();
console.log(promotion);
if (promotion === "Special Event") {
$("div.calendar-event").addClass("special-event"); // this is the only one with a class created for it so far
} else if (promotion === "Daily Promotion") {
$("div.calendar-event").addClass("daily-promotion");
}
});
HTML: (1 of many containers)
<li class="hidden-xs col-sm-6 col-md-4">
<div class="calendar-event">
<div class="event-details-container">
<div class=" col-xs-4 calendar-thumbnail">
<a href="/warroad-calendar/canadian-day">
<img src="/_images/warroad/calendar/may-june-2014/canadianDay.jpg" border="0" alt="" />
</a>
</div>
<h3>Canadian Day</h3>
<h4>8 a.m. - 6 p.m.</h4>
<strong></strong><br />
<div class="hidden-xs hidden-sm hidden-md hidden-lg promotion-type">Daily Promotion</div>
</div>
</div>
</li>
Change this:
$("div.calendar-event").addClass("special-event");
to this:
$(this).parents("div.calendar-event").addClass("special-event");
As it appears you already know, using the selector $("div.calendar-event") is going to select all <div> elements with the class calendar-event.
By using $(this).parents("div.calendar-event"), you're going to look through all parents of the starting <li> element, starting with the closest parent and progressing outwards. When it finds the parent that is a <div> element with the class calendar-event, it's going to call .addClass() on that parent element.
The problem is that you are doing a new selection instead of using the current element. Try...
$(this).parent().parent().addClass(...);
...or possibly...
$(this).parents('div.calendar-event').addClass(...);
...instead.
Instead of this-
$("div.calendar-event", this).addClass("special-event");
try this:
this.find("div.calendar-event").addClass("special-event");
Use text() instead of html()
remove the classes first
use $(this)
Code:
$('div.promotion-type').each(function () {
var promotion = $(this).text();
console.log(promotion);
$(this).parent().removeClass("special-event");
$(this).parent().removeClass("daily-promotion");
$(this).parent().addClass(
promotion === "Special Event" ? 'special-event': 'daily-promotion');
});