AngularJS ng-class-even and ng-class-odd example

AngularJS ng-class-even and ng-class-odd can be used with ng-repeat directive and ng-class-even will be applied to even rows and ng-class-odd will be applied to odd rows in the ng-repeat rows. In the below example bgeven class will be applied to even rows and bgodd class will be applied to odd rows of the table.

Syntax

<tr ng-repeat="department in departments" ng-class-even="{bgeven:true}" ng-class-odd="{bgodd:true}"> <td> {{department.Name}} </td> </tr>

Example

Department Name
{{department.Name}}

Source code

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .tblcls { border-collapse: collapse; } .tblcls td { border: solid 1px #ccc; padding: 5px 10px; } .tblcls th { border: solid 1px #ccc; padding: 5px 10px; background: #B14646; } .bgeven { background: #C7C5C7; } .bgodd { background: #4685B1; } </style> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCntrl"> <table class="tblcls"> <thead> <tr> <th> Department Name </th> </tr> </thead> <tr ng-repeat="department in departments" ng-class-even="{bgeven:true}" ng-class-odd="{bgodd:true}"> <td> {{department.Name}} </td> </tr> </table> </div> <script language="javascript"> var myapp = angular.module("myApp", []); myapp.controller("myCntrl", function ($scope) { $scope.departments = [{ "Name": "Accounts" }, { "Name": "Development" }, { "Name": "Finance" }, { "Name": "HR" }, { "Name": "Testing"}]; }); </script> </body> </html>