Angularjs ng-class

Question

ng-class is not working with multiple condition. Apply a class when both conditions are true

Here open and active class should apply when childActive is equal to header and list items is not empty

<li ng-class="{'open':list.items.length&&childActive==header,
'active':list.items.length&&childActive==header}"
         ng-repeat="list in listEntities">

I suggest to add a function in case of having complex expressions — Vinodh Thangavel
– Vinodh Thangavel, Commented Feb 18, 2015 at 7:12

New Dev · Accepted Answer · 2014-12-17 05:43:49Z

2

You have some other issue. The following, with multiple conditions, works:

<input ng-model="highlightEven" type="checkbox">
<div ng-repeat="item in ['a', 'b', 'c', 'd']"
     ng-class="{even: $index % 2 === 0 && highlightEven}">{{item}}</div>

plunker

answered Dec 17, 2014 at 5:43

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rohit Over a year ago

It is also not working with two classes:<div ng-repeat="item in ['a', 'b', 'c', 'd']" ng-class="{even: $index % 2 === 0 && highlightEven, even-size: $index % 2 === 0 && highlightEven}">{{item}}</div>

New Dev Over a year ago

I don't understand what you're asking (if you're asking)

New Dev Over a year ago

Put even-size in single-quotes: "{'even-size': $index % 2 === 0 && highlightEven}"

Rohit Over a year ago

Thanks New Dev. Now it's working fine : plnkr.co/edit/ULJlInfSlK7SIf3o8DOG?p=preview

Collectives™ on Stack Overflow

Angularjs ng-class

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related