- 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.
1 | < !DOCTYPE html><br><html ng-app="myApp"><br><head><br> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script><br> <meta charset="utf-8"/><br> <title>AngularJS ngClass ngClassEven ngClassOdd Example</title><br></head><br><body ng-controller="MyController"><br> <input type="text" ng-model="header" placeholder="Enter color"/><br> <table border="1"><br> <thead><br> <tr ng-class="header"><br> <th>Name</th><br> <th>Subject</th><br> <th>Marks</th><br> </tr><br> </thead><br> <tbody><br> <tr ng-repeat="student in studentData" ng-class-odd="'odd-row'" ng-class-even="'even-row'"><br> <td>{{student.name}}</td><br> <td>{{student.subject}}</td><br> <td>{{student.marks}}</td><br> </tr><br> </tbody><br> </table><br> <br></body><br></html> |
- The javascript code are as follows:-
- The CSS style code are as follows:-
- The output of the above code is embedded in below JSBIN link.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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} ]; }]); |
1 2 3 4 5 6 7 8 9 | .red{ color:red;}.odd-row{ color:green;}.even-row{ color:orange;} |
