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.
Just make a rule for each case: <div id=”homePage” ng-class=”{ ‘center’: page.isSelected(1) , ‘left’: !page.isSelected(1) }”> Or use the ternary operator: <div id=”homePage” ng-class=”page.isSelected(1) ? ‘center’ : ‘left'”>
A quick solution would be define the box class inside ng-class attribute: <div data-ng-class=”{mini: !isMaximized, box: true}”></div> If you want to include a scope variable as a class, you can’t use ng-class: <div class=”{{class}} box {{!isMaximized && ‘mini’ || ”}}”> Angular expressions do not support the ternary operator, but it can be emulated like this: … Read more
Indeed <p class=”{{condition ? ‘checked’ : ‘unchecked’}}”> or <p [ngClass]=”condition ? ‘checked’ : ‘unchecked'”> or <p [ngClass]=”[condition ? ‘checked’ : ‘unchecked’]”> Angular 9 Update But you should know that there’s a difference in how different types of class bindings behave, especially when there are multiple types of class bindings on the same element. And the … Read more
You could create a directive that processed the options after the ngOptions directive is processed that updated them with the appropriate classes. Update: The old code had a few bugs, and I’ve learned a bit since I answered this question. Here is a Plunk that was redone in 1.2.2 (but should work in 1.0.X as … Read more
I want to add or remove “active” class in my code dynamically on ng-click, here what I have done. <ul ng-init=”selectedTab = ‘users'”> <li ng-class=”{‘active’:selectedTab === ‘users’}” ng-click=”selectedTab = ‘users'”><a href=”#users” >Users</a></li> <li ng-class=”{‘active’:selectedTab === ‘items’}” ng-click=”selectedTab = ‘items'”><a href=”#items” >Items</a></li> </ul>
Use nested inline if-then statements (Ternary Operators) <div ng-class=” … ? ‘class-1’ : ( … ? ‘class-2’ : ‘class-3’)”> for example : <div ng-class=”apt.name.length >= 15 ? ‘col-md-12’ : (apt.name.length >= 10 ? ‘col-md-6’ : ‘col-md-4′)”> … </div> And make sure it’s readable by your colleagues 🙂
To apply different classes when different expressions evaluate to true: <div ng-class=”{class1 : expression1, class2 : expression2}”> Hello World! </div> To apply multiple classes when an expression holds true: <!– notice expression1 used twice –> <div ng-class=”{class1 : expression1, class2 : expression1}”> Hello World! </div> or quite simply: <div ng-class=”{‘class1 class2’ : expression1}”> Hello World! … Read more