Reputation: 15735
I have a very strange issue. I have to set an active
class on the appropriate <li>
when the $scope.selectedCat == cat.id
. The list is generated with ng-repeat. If selectedCat is false, the 'Browse All Categories' list item (outside of ng-repeat) is set to active. setCat()
sets the value of the $scope.selectedCat
variable:
<div id="cat-list" ng-controller="CatController">
<li ng-class="{'active': {{selectedCat == false}}}">
<a>
<div class="name" ng-click="setCat(false)" >Browse All Categories</div>
</a>
</li>
<li class="has-subcat" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': {{selectedCat == cat.id}}}">
<a>
<div cat class="name" ng-click="setCat({{cat.id}})" ng-bind-html="cat.name | highlight:catsearch"></div>
</a>
</li>
</div>
When the page loads, everything works fine (snapshot from FireBug):
<li ng-class="{'active': true}" class="ng-scope active">
<!-- ngRepeat: cat in cats | filter:catsearch -->
<li class="has-subcat ng-isolate-scope" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': false}">
However when I set $scope.selectedClass to a cat.id
value, the condition within ng-class gets evaluated correctly, but ng-class won't update the classes accordingly:
<li ng-class="{'active': false}" class="ng-scope active"> <!--Right here!-->
<!-- ngRepeat: cat in cats | filter:catsearch -->
<li class="has-subcat ng-isolate-scope" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': true}">
Please note that in the first line active class stays set, while ng-class evaluates to false. In the last line active is not set, while ng-class evaluates to true.
Any ideas why it doesn't work? What's the correct Angular way of doing this?
Upvotes: 32
Views: 46091
Reputation: 1
Did you solve it?
In my opinion you should use
ng-class="{'active': {{controller.selectedCat == cat.id}}}"
With:
ng-class="{'active': controller.selectedCat == cat.id}"
this will help you.
Upvotes: 0
Reputation: 72957
Replace:
ng-class="{'active': {{selectedCat == cat.id}}}"
With:
ng-class="{'active': selectedCat == cat.id}"
You never need to nest those curly braces like that, in Angular.
Have a look at the ng-class
documentation for some more examples.
Upvotes: 35
Reputation: 171
Expanding on the answer @Cerbrus gave:
Replace:
ng-class="{'active': {{selectedCat == cat.id}}}"
With:
ng-class="{'active': selectedCat == cat.id}"
I had an issue with an expression using a filter, that would not evaluate properly without double curly braces {{ }}
.
Example: ng-class="{'active': {{ selectedCat | filter:catType }} == cat.id}"
I solved it by putting parentheses instead of curly braces.
Solution: ng-class="{'active': ( selectedCat | filter:catType ) == cat.id}"
Upvotes: 2
Reputation: 61
Hi i'm also facing the same problem. i solved the problem by the way instead of assigning the value directly to ng-class, call the separate method and return the value.
ex :
ng-class="getStyleClass(cat)"
$scope.getStyleClass = function(cat) {
return "active: selectedCat == cat.id";
}
roughly i coded. please change the method as per your requirement.
Upvotes: 6
Reputation: 7764
Instead of
ng-class="{'active': {{selectedCat == cat.id}}}"
use
ng-class="{active: selectedCat == cat.id}"
Upvotes: 13