This article describes the usage of ng-class in AngularJS. Share it for your reference, as follows:
Use ng-class to dynamically set the element's class by binding an expression that represents all classes that need to be added. Duplicate classes will not be added. When the expression changes, the previously added class will be removed and the new class will be added.
There are 3 solutions for us in angular:
①Bi-directional binding through data (not recommended)
② Pass through an object array.
③ Pass key/value
1. Bidirectional binding through data:
function changeClass(){
$ = "change2";
}
<div class="{{className}}"></div>
2. Change through the form of string array
<div ng-controller="firstController">
<div ng-class="{true:'change1',false:'change2'}[className]"></div>
</div>
<script>
var app=("myModule",[])
('firstController',function($scope){
$=true;
})
</script>
3. Pass key/value
function Ctr($scope) {
}
<div ng-class {'selected': isSelected, 'car': isCar}">
</div>
illustrate:When isSelected is true, add class ‘selected’. When isCar is true, add class ‘car’
For more information about AngularJS, readers who are interested in view the topic of this site:Summary of AngularJS command operation skills》、《AngularJS Introduction and Advanced Tutorial"and"AngularJS MVC architecture summary》
I hope this article will be helpful to everyone's AngularJS programming.