WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS Tables


The ng-rehash order is ideal for showing tables.


Displaying Data in a Table

Displaying tables with precise 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

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

CSS Style

<style>
table, th , td {
  outskirt: 1px strong grey;
  outskirt breakdown: collapse;
  cushioning: 5px;
}
table tr:nth-child(odd) {
  foundation shading: #f1f1f1;
}
table tr:nth-child(even) {
  foundation shading: #ffffff;
}
</style>
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 capitalized Filter

To show capitalized, include a uppercase filter: 

AngularJS Example

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country | capitalized }}</td>
  </tr>
</table>
Try it Yourself »

Display the Table Index ($index)

To show the table record, include 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 »