AngularJS ng-classDirective
AngularJS Reference ManualAngularJS Example
Modify the class of the <div> element:
<select ng-model="home">
<option value="sky">Sky</option>
<option value="tomato">Tomato</option>
</select>
<div ng-class="home">
<h1>Welcome Home!</h1>
<p>I like it!</p>
</div>
<option value="sky">Sky</option>
<option value="tomato">Tomato</option>
</select>
<div ng-class="home">
<h1>Welcome Home!</h1>
<p>I like it!</p>
</div>
Try it Yourself »
Definition and Usage
ng-classThe directive is used to dynamically bind one or more CSS classes to HTML elements.
ng-classThe value of the 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, key-value pairs are required. The key is the class name you want to add, and the value is a boolean value. The class is added only when the value is true.
If it is an array, it can be composed of a combination of strings or objects; the elements of the array can be strings or objects.
Syntax
<element ng-class="expression"></element>
Supported by all HTML elements.
Parameter Value
| Value | Description |
|---|---|
| expression | The expression returns one or more class names. |
Other Extensions