Reputation: 6894
I want to apply multiple classes .active
on item click and another class based on some condition. How can i do both? Below is the code which I have and only MyAnotherClass
gets applied.
<li ng-class="(item.name == currentState && 'active' && isItemValid(item) && 'myAnotherClass' )" ng-repeat="item in menuItems">
<a ui-sref="{{item.name}}" ng-click="selectedItem(item)">{{item.name}}</a>
</li>
Upvotes: 0
Views: 271
Reputation: 1162
Per the ngClass directive documentation, use an object literal with keys of the class names to apply and values of the boolean variables to indicate to add/remove the classes.
It appears that you can use expressions that resolve to booleans in place of a variable in v1.2.6. However, I haven't tested functions.
<li ng-class="{ active: item.name == currentClickState, myAnotherClass: isItemValid(item) }" ng-repeat="item in navigationMenuItems">
<a ui-sref="{{item.name}}" ng-click="selectedItem(item)">{{item.name}}</a>
</li>
P.S. Have a look at Logical Operators. With &&
the myAnotherClass
is only applied if every statements before it is truthy, and active
will never be applied as that string is truthy and the next statement is tested. I'm guessing you were intending something like (item.name===currentClickState ? 'active' :'')+(isItemValid(item) ? 'myAnotherClass' :'')
(That's a Conditional Operator)
Upvotes: 1
Reputation: 67326
With ng-class
, you can separate the classes (and their respective rules (expressions)) using a comma separated listing.
Here is an example:
<li ng-class="{'active': isActive && !isDeleted, 'myAnotherClass': isValidOtherClass}"></li>
This technique should allow you to accomplish any combination of dynamically applied classes.
Documentation for ng-class is here.
Upvotes: 2