Sunday, 26 April 2015

AngularJS Tables



The ng-repeat directive is perfect for displaying tables.

Displaying Data in a Table:
<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.ravikumargupta.com/angular/customers.asmx")
    .success(function (response) {$scope.names = response.records;});
});
</script>


Displaying with CSS Style:
To make it nice, add some CSS to the page:
<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>


Display with orderBy Filter:
To sort the table, add an orderBy filter: 
<table>
  
<tr ng-repeat="x in names | orderBy : 'Country'">
    
<td>{{ x.Name }}</td>
    
<td>{{ x.Country }}</td>
  
</tr>
</table>


Display with uppercase Filter:
To display uppercase, add an uppercase filter: 
<table>
  
<tr ng-repeat="x in names">
    
<td>{{ x.Name }}</td>
    
<td>{{ x.Country | uppercase}}</td>
  
</tr>
</table>




No comments:

Post a Comment