AngularJS ng-class-even Directive

The AngularJS ng-class-even directive works exactly same as ng-class, but it is used together with ng-repeat and take effect only on even rows.

Note: It is a perfect directive for styling items in a list or rows in a table. It is supported by all HTML elements.

Syntax:

Parameter explanation:

expression: It specifies an expression that returns one or more class names.

Let's take an example to demonstrate ng-class-even directive.

See this example:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
.striped {
    color:white;
    background-color:grey;
}
</style>
<body ng-app="myApp">

<table ng-controller="myCtrl">
<tr ng-repeat="x in records" ng-class-even="'striped'">
  <td>{{x.Name}}</td>
  <td>{{x.Country}}</td>
</tr>
</table>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    {
      "Name" : "Ajeet Kumar",
      "Country" : "India"
    },
    {
      "Name" : "Suresh Prabhu",
      "Country" : "India"
    },
    {
      "Name" : "Donald Trump",
      "Country" : "USA"
    },
    {
      "Name" : "Nawaz Sharif",
      "Country" : "Pakistan"
    }
  ]
});
</script>
</body>
</html>

Test it Now

Next TopicAngularJS ng-class-odd Directive

← prev next →