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 🙂
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
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