- AngularJS provides ngClass,ngClassEven and ngClassOdd directives for controlling applied class to an element.
- ngClassEven and ngClassOdd can be used in ngRepeat loop to style the alternate rows.
- In this demo, “We will create student table and apply these classes to alternate row for different color styling”.
- Below code uses for showing student data in alternate row.
< !DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8"/>
<title>AngularJS ngClass ngClassEven ngClassOdd Example</title>
</head>
<body ng-controller="MyController">
<input type="text" ng-model="header" placeholder="Enter color"/>
<table border="1">
<thead>
<tr ng-class="header">
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in studentData" ng-class-odd="'odd-row'" ng-class-even="'even-row'">
<td>{{student.name}}</td>
<td>{{student.subject}}</td>
<td>{{student.marks}}</td>
</tr>
</tbody>
</table>
</body>
</html>
- The javascript code are as follows:-
var myApp= angular.module("myApp",[]);
myApp.controller("MyController",
["$scope", function($scope){
$scope.header="red";
$scope.studentData = [
{"name":"Sandeep","subject":"Computer","marks":130},
{"name":"Sangeeta","subject":"Math","marks":232},
{"name":"Surabhi","subject":"History","marks":220},
{"name":"Sumanta","subject":"Geography","marks":530},
{"name":"Bapi","subject":"Physics","marks":530},
{"name":"Rohan","subject":"Chemistry","marks":630},
{"name":"Ram","subject":"English","marks":930},
{"name":"Gopal","subject":"Computer","marks":830},
{"name":"John","subject":"Computer","marks":330}
];
}]);
.red{
color:red;
}
.odd-row{
color:green;
}
.even-row{
color:orange;
}
