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">

    <script src="//"></script>
    <meta charset="utf-8">
    <title>AngularJS ngClass ngClassEven ngClassOdd Example</title>
        .red {
            color: red;
        .odd-row {
            color: green;
        .even-row {
            color: orange;

<body ng-controller="MyController">
    <input type="text" ng-model="header" placeholder="Enter color">
    <table border="1">
            <tr ng-class="header">
            <tr ng-repeat="student in studentData" ng-class-odd="'odd-row'" ng-class-even="'even-row'">
        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


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