AngularJS Tutorial（8）from w3school



The ng-repeat directive is perfect for displaying tables.

---

Displaying Data in a Table

Displaying tables with angular is very simple:

AngularJS Example

< div ng-app= "myApp" ng-controller= "customersCtrl" >

< table >
  < tr ng-repeat= "x in names" >
    < td > {{ x.Name }} < /td >
    < td > {{ x.Country }} < /td >
  < /tr >
< /table >

< /div >

< script >
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.w3schools.com/angular/customers.php")
    .success(function (response) {$scope.names = response.records;});
});
< /script >

Try it Yourself »

---

Displaying with CSS Style

To make it nice, add some CSS to the page:

CSS Style

<style>
table, th , td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>

Try it Yourself »

---

Display with orderBy Filter

To sort the table, add an orderBy filter: 

AngularJS Example

< table >
  < tr ng-repeat= "x in names | orderBy : 'Country'" >
    < td > {{ x.Name }} < /td >
    < td > {{ x.Country }} < /td >
  < /tr >
< /table >

Try it Yourself »

---

Display with uppercase Filter

To display uppercase, add an uppercase filter: 

AngularJS Example

< table >
  < tr ng-repeat= "x in names" >
    < td > {{ x.Name }} < /td >
    < td > {{ x.Country | uppercase }} < /td >
  < /tr >
< /table >

Try it Yourself »

---

Display the Table Index ($index)

To display the table index, add a <td> with $index: 

AngularJS Example

< table >
  < tr ng-repeat= "x in names" >
    < td > {{ $index + 1 }} < /td >
    < td > {{ x.Name }} < /td >
    < td > {{ x.Country }} < /td >
  < /tr >
< /table >

Try it Yourself »

---

Using $even and $odd

AngularJS Example

< table >
< tr ng-repeat= "x in names" >
< td ng-if= "$odd" style= "background-color:#f1f1f1" > {{ x.Name }} < /td >
< td ng-if= "$even" > {{ x.Name }} < /td >
< td ng-if= "$odd" style= "background-color:#f1f1f1" > {{ x.Country }} < /td >
< td ng-if= "$even" > {{ x.Country }} < /td >
< /tr >
< /table >

Try it Yourself »