AngularJS Display alternate color in table row

In this AngularJS example you will learn how to display alternate color in table row. In this example you will learn how to ng-class-odd and ng-class-even directive to decorate the even and odd table rows in HTML table.

Here you can view the output of the example and you can also "try it yourself" by clicking on "Try Now" button given at the bottom.

Syntax

<table>  
	<th>Name</th><th>Last Name</th><th>Designation</th>  
	<th>Salary</th><th>Phone</th>  
	<tr ng-repeat="emp in employees" ng-class-odd="'odd'" ng-class-even="'even'">  
	  <td>{{ emp.firstName }}</td>  
	  <td>{{ emp.lastName }}</td>  
	  <td>{{ emp.jobTitle }}</td>  
	  <td>{{ emp.salary }}</td>  
	  <td>{{ emp.phone }}</td>  
	</tr>  
</table>     

AngularJS Display alternate color in table row Example

<!DOCTYPE html>              
<html>              
<head> <!-- www.techstrikers.com -->               
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>               
    <meta charset="utf-8">              
    <title>AngularJS Display alternate color in table row code Example</title>  
 <style> 
   table { width:100%;} 
   table, th , td  {  
  border: 1px solid grey;  
  border-collapse: collapse;  
  padding: 5px;  
  
  font-family:arial;  
  }
  .odd {
  background-color: #ffffff;
  }
  .even {
    background-color: #f1f1f1;
  }
  </style>  
  <script>              
var app = angular.module('app', []);              
    app.controller("appController", function ($scope) {        
    $scope.employees = [{    
        firstName:"Jimi",    
        lastName:"Scott",    
        jobTitle:"Developer",    
        salary:20000,    
        phone:"345-333-7845"    
      },    
      {    
          firstName:"Bailey",    
          lastName:"Lee",    
          jobTitle:"Lead",    
          salary:30000,    
          phone:"322-121-213"    
      },    
      {    
          firstName:"Aura",    
          lastName:"Martin",    
          jobTitle:"QA",    
          salary:35000,    
          phone:"322-333-0987"    
      },    
      {    
          firstName:"Austin",    
          lastName:"Williams",    
          jobTitle:"Designer",    
          salary:20000,    
          phone:"322-265-2321"    
      },    
      {    
          firstName:"Bara",    
          lastName:"Miller",    
          jobTitle:"Tester",    
          salary:15000,    
          phone:"322-890-2321"    
      },{    
          firstName:"Carlton",    
          lastName:"Taylor",    
          jobTitle:"Manager",    
          salary:45000,    
          phone:"322-456-2321"    
      },    
      {    
          firstName:"Adisa",    
          lastName:"White",    
          jobTitle:"Developer",    
          salary:25000,    
          phone:"121-333-2321"    
      }];    
    });       
</script>              
</head>              
<body style="background-color:#DDE4E9;font-family:arial;">              
  <fieldset style="background-color:#DDE4E9;">                          
<legend>AngulerJS Display alternate color in table 
row code Example</legend>               
  <div ng-app="app">       
    <div ng-controller="appController">       
      <table>  
        <th>Name</th><th>Last Name</th><th>Designation</th>  
        <th>Salary</th><th>Phone</th>  
        <tr ng-repeat="emp in employees" ng-class-odd="'odd'" ng-class-even="'even'">  
          <td>{{ emp.firstName }}</td>  
          <td>{{ emp.lastName }}</td>  
          <td>{{ emp.jobTitle }}</td>  
          <td>{{ emp.salary }}</td>  
          <td>{{ emp.phone }}</td>  
        </tr>  
</table>  
  </div>      
</div>              
</div>              
 </fieldset>               
</body>              
</html>

See Live Example

« Previous