Home>

angularjs ng-class directive

angularjs example

Modify the class of the

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</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 key-value pairs, where key is a boolean value,value is the name of the class i want to add.Classes are added only if key is true.

If it is an array,Can consist of a string or a combination of objects,The elements of an array can be strings or objects.

grammar

<element ng-class="expression"></element>

All html elements are supported.

Parameter value

value description
expression The expression returns one or more class names.

  • Previous AngularJS basic ng-csp instructions
  • Next First exposure to the amazing Bootstrap menus and navigation