The ng-class directive used to apply dynamically CSS classes on the basis of true and false value. Means we can apply one or more than one classes for true value of expression and apply some other classes for the false value of the expression. Let's understand with an example of the ng-class:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body ng-app>
<div>
<input type="checkbox" ng-model="checked" ng-init="checked=true" />
<div ng-class="{true:'text-success',false:'text-danger'}[checked]">
I am green if checkbox is checked otherwise red.
</div>
</div>
</body>
</html>
The ng-class directive will apply the class ‘text-success’ or ‘text-danger’ based on the true or false value of the checked variable.If the checkbox is checked then the value of checked variable is true and ‘text-success’ class will apply to the element’s content and if false then ‘text-danger’ class will apply to the content.
If you want to apply classes only for true value of the expression then you can use ng-class directive like this
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body ng-app>
<div>
<input type="checkbox" ng-model="checked" ng-init="checked=true" />
<div ng-class="{true:'text-success'}[checked]">
I am green if checkbox is checked otherwise black.
</div>
</div>
</body>
</html>
Now if value of checked variable is true then ‘text-success’ class will apply otherwise no class applied to this element.
The ng-class-even directive is exactly same as the ng-class directive except that ng-class-even directive work with the ng-repeat directive and use the effect of even rows. Means on the row 2nd,4th,6th... and so on , the class applied which is assigned to this directive.
The ng-class-odd directive is exactly same as the ng-class directive except that ng-class-odd directive work with the ng-repeat directive and use the effect of odd rows.Let's understand with an example of the ng-class-even and ng-class-odd directives. Means on the row 1st, 3rd, 5th... and so on , the class applied which is assigned to this directive.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body ng-app="sampleApplication">
<div ng-controller="sampleController">
<div ng-repeat="emp in employees">
<span ng-class-even="'text-success'" ng-class-odd="'text-danger'">{{emp}}</span> <br />
</div>
</div>
<script>
var app = angular.module('sampleApplication', []);
app.controller('sampleController', function ($scope) {
$scope.employees = ["Bowles", "Audette", "Marie", "Rabuka"];
});
</script>
</body>
</html>
In the above example we use ng-class-even and ng-class-odd directives in the scope of ng-repeat directive because we can use these directives only in the scope of ng-repeat directive. The even rows will display in green text color and the odd rows in the red text color. ‘text-success’ and ‘text-danger’ both are the bootstrap classes.