Menu
The toggling of the class can be done in 2 ways, i.e., either specifying the value to 0 or 1, depending upon the condition satisfied, by initially defining the value as 0, or depending on the boolean value, i.e., true or false, with satisfying the required condition, by initially setting the value as true.
AngularJS ng-class Directive The ng-class directive dynamically binds one or more CSS classes to an HTML element. The value of the ng-class directive can be a string, an object, or an array. If it is a string, it should contain one or more, space-separated class names.
The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.
How to use conditional in ng-class:
Solution 1:
<i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>
Solution 2:
<i ng-class="{true: 'icon-autoscroll', false: 'icon-autoscroll-disabled'}[autoScroll]"></i>
Solution 3 (angular v.1.1.4+ introduced support for ternary operator):
<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>
Plunker
As alternate solution, based on javascript logic operator '&&' which returns the last evaluation, you can also do this like so:
<i ng-class="autoScroll && 'icon-autoscroll' || !autoScroll && 'icon-autoscroll-disabled'"></i>
It's only slightly shorter syntax, but for me easier to read.
Add more than one class based on the condition:
<div ng-click="AbrirPopUp(s)"
ng-class="{'class1 class2 class3':!isNew,
'class1 class4': isNew}">{{ isNew }}</div>
Apply: class1 + class2 + class3 when isNew=false,
Apply: class1+ class4 when isNew=true
<div data-ng-init="featureClass=false"
data-ng-click="featureClass=!featureClass"
data-ng-class="{'active': featureClass}">
Click me to toggle my class!
</div>
Analogous to jQuery's toggleClass method, this is a way to toggle the active class on/off when the element is clicked.
autoscroll will be defined and modified in the controller:
<span ng-class= "autoscroll?'class_if_true':'class_if_false'"></span>
Add multiple classes based on condition by:
<span ng-class= "autoscroll?'first second third':'classes_if_false'"></span>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With