AngularJS #13 - Tables

✔ AngularJS Tables

 > ng-repeat directive is perfect for displaying tables

 

1. Displaying Data in a Table

<div ng-app="myApp" ng-controller="myCtrl">
 <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('myCtrl', function($scope, $http){
  $http.get("customer.php")
  .then(function(response){
   $scope.names = response.data.records;
  });
 });
</script>

 

 

2. Displaying with CSS Style

 > to make it nice, add some CSS

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

 

 

3. Display with orderBy Filter

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

 

 

4. Display with uppercase Filter

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

 

 

5. Display the Table Index ($index)

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

 

 

6. Using $even and $odd

<table>
 <tr ng-repeat="x in names">
  <td ng-if="$odd" style="backgroud-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>