WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS Tables


The ng-repeat command displays the table perfectly.


Displaying Data in a Table

Using angular to display a table 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 application = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.welookups.com/precise/customers.php")
    .then(function (reaction) {$scope.names = response.data.records;});
});
</script>
Try it Yourself »

Displaying with CSS Style

If you are using a version below v1.5, you can use the following code:

CSS 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; }
Try it Yourself »

Display with orderBy Filter

To sort the table, include a 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 show uppercase, include a 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)

The table display serial number can be added to $ t in :

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 »