AngularJS ngClassEven NgClassOdd Example

                                                  ngClassEven ngClassOdd
  • 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>
    <style>
        .red {
            color: red;
        }
        .odd-row {
            color: green;
        }
        .even-row {
            color: orange;
        }
    </style>
</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>
    <script>
        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
            }];

        }]);
    </script>
</body>

</html>
  • The output of the above code is embedded in below JSBIN link.
AngularJS ngClass ngClassEven ngClassOdd Example