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 »