AngularJS ng-class directive
AngularJS instance
Modify the class of the <div> element:
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><style>.sky { color:white; background-color:lightblue; padding:20px; font-family:"Courier New";}.tomato { background-color:coral; padding:40px; font-family:Verdana;}</style></head><body ng-app=""><p>Select a class:</p><select ng-model="home"><option value="sky">Sky color</option><option value="tomato">Tomato color</option></select><div ng-class="home"> <h1>Welcome Home!</h1> <p>I like it!</p></div></body></html>Definition and usage
The ng-class directive is used to dynamically bind one or more CSS classes to HTML elements.
The value of the ng-class directive can be a string, an object, or an array.
If it is a string, multiple class names are separated by spaces.
If it is an object, you need to use a key-value pair, which is a boolean value, and the value is the class name you want to add. The class will only be added if the key is true.
If it is an array, it can be composed of strings or combinations of objects, and the elements of the array can be strings or objects.
grammar
<element ng-class="expression"></element>
All HTML elements are supported.
Parameter value
| value | describe |
|---|---|
| Expression | An expression returns one or more class names. |
The above is a compilation of AngularJS ng-class instruction information, for reference by friends in need.