AngularJS - ngClassEven & ngClassOdd

by Marventus

HTML

<div ng-app="myRows">
  <table ng-controller="MainCtrl as ctrl" cellspacing="0">
    <thead>
      <tr>
        <td>Name</td>
        <td>Role</td>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="person in ctrl.people" ng-class-even="'even'" ng-class-odd="'odd'">
        <td>{{person.name}}</td>
        <td><em>{{person.role}}</em></td>
      </tr>
    </tbody>
  </table>
</div>

CSS

body {
  font: 16px Arial, Helvetica, sans-serif;
}

table {
  background: #fff;
  border: 1px solid #aaa;
  margin: 1em auto;
  text-align: center;
  width: 80%;
}

table tr td:first-of-type {
  border-right: 1px solid #aaa;
}

table td {
  cellpadding: 0;
  padding: 0;
  width: 50%;
}

table thead tr {
  background: #66f;
  color: #fff;
  border-bottom: 1px solid #aaa;
  font-weight: bold;
  height: 1.5em;
  padding: 2em;
}

table tbody {
  font-size: 0.9em;
}

table tr.even {
  background: #efefff;
}

table tr.odd {
  background: #ddf;
}

JavaScript

var myRows = angular.module("myRows", []);
myRows.controller("MainCtrl", function() {
  this.people = [{
    name: "Raúl",
    role: "Student"
  }, {
    name: "José",
    role: "Teacher"
  }, {
    name: "Daniela",
    role: "Teacher"
  }, {
    name: "Constanza",
    role: "Student"
  }];
});