AngularJS table
The ng-repeat directive can display tables perfectly.
Display data in table
It is very easy to use angular to display tables:
AngularJS instance
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><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("/try/angularjs/data/Customers_JSON.php") .success(function (response) {$scope.names = response.records;});});</script></body></html>Running results:
| Alfreds Futterkiste | Germany |
| Ana Trujillo Emparedados y heldos | Mexico |
| Antonio Moreno Taquería | Mexico |
| Around the Horn | UK |
| B's Beverages | UK |
| Berglunds snabbköp | Sweden |
| Blauer See Delikatessen | Germany |
| Blondel père et fils | France |
| Bólido Comidas preparedas | Spain |
| Bon app' | France |
| Bottom-Dollar Marketse | Canada |
| Cactus Comidas para llevar | Argentina |
| Centro comercial Moctezuma | Mexico |
| Chop-suey Chinese | Switzerland |
| Comércio Mineiro | Brazil |
Using CSS Styles
To make the page more beautiful, we can use CSS in the page:
CSS Style
</style></head><body><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.runoob.com/try/angularjs/data/Customers_JSON.php") .success(function (response) {$scope.names = response.records;});});</script></body></html>Running results:
| Alfreds Futterkiste | Germany |
| Ana Trujillo Emparedados y heldos | Mexico |
| Antonio Moreno Taquería | Mexico |
| Around the Horn | UK |
| B's Beverages | UK |
| Berglunds snabbköp | Sweden |
| Blauer See Delikatessen | Germany |
| Blondel père et fils | France |
| Bólido Comidas preparedas | Spain |
| Bon app' | France |
| Bottom-Dollar Marketse | Canada |
| Cactus Comidas para llevar | Argentina |
| Centro comercial Moctezuma | Mexico |
| Chop-suey Chinese | Switzerland |
| Comércio Mineiro | Brazil |
Use orderBy filter
Sort display, you can use the orderBy filter:
AngularJS instance
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><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></head><body><div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy : 'Country'"> <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("/try/angularjs/data/Customers_JSON.php") .success(function (response) {$scope.names = response.records;});});</script></body></html>Running effect:
| Cactus Comidas para llevar | Argentina |
| Comércio Mineiro | Brazil |
| Bottom-Dollar Marketse | Canada |
| Blondel père et fils | France |
| Bon app' | France |
| Alfreds Futterkiste | Germany |
| Blauer See Delikatessen | Germany |
| Ana Trujillo Emparedados y heldos | Mexico |
| Antonio Moreno Taquería | Mexico |
| Centro comercial Moctezuma | Mexico |
| Bólido Comidas preparedas | Spain |
| Berglunds snabbköp | Sweden |
| Chop-suey Chinese | Switzerland |
| Around the Horn | UK |
| B's Beverages | UK |
Use uppercase filter
Use the uppercase filter to convert to uppercase:
AngularJS instance
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><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></head><body><div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country | uppercase }}</td> </tr></table></div><script>var app = angular.module('myApp', []);app.controller('customersCtrl', function($scope, $http) { $http.get("/try/angularjs/data/Customers_JSON.php") .success(function (response) {$scope.names = response.records;});});</script></body></html>Running effect:
| Alfreds Futterkiste | GERMANY |
| Ana Trujillo Emparedados y heldos | MEXICO |
| Antonio Moreno Taquería | MEXICO |
| Around the Horn | UK |
| B's Beverages | UK |
| Berglunds snabbköp | SWEDEN |
| Blauer See Delikatessen | GERMANY |
| Blondel père et fils | FRANCE |
| Bólido Comidas preparedas | SPAIN |
| Bon app' | FRANCE |
| Bottom-Dollar Marketse | CANADA |
| Cactus Comidas para llevar | ARGENTINA |
| Centro comercial Moctezuma | MEXICO |
| Chop-suey Chinese | SWITZERLAND |
| Comércio Mineiro | BRAZIL |
Display serial number ($index)
The table display serial number can be added $index in <td>:
AngularJS instance
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><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></head><body><div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names"> <td>{{ $index + 1 }}</td> <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("/try/angularjs/data/Customers_JSON.php") .success(function (response) {$scope.names = response.records;});});</script></body></html>Running effect:
| 1 | Alfreds Futterkiste | Germany |
| 2 | Ana Trujillo Emparedados y heldos | Mexico |
| 3 | Antonio Moreno Taquería | Mexico |
| 4 | Around the Horn | UK |
| 5 | B's Beverages | UK |
| 6 | Berglunds snabbköp | Sweden |
| 7 | Blauer See Delikatessen | Germany |
| 8 | Blondel père et fils | France |
| 9 | Bólido Comidas preparedas | Spain |
| 10 | Bon app' | France |
| 11 | Bottom-Dollar Marketse | Canada |
| 12 | Cactus Comidas para llevar | Argentina |
| 13 | Centro comercial Moctezuma | Mexico |
| 14 | Chop-suey Chinese | Switzerland |
| 15 | Comércio Mineiro | Brazil |
Use $even and $odd
AngularJS instance
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><style>table, td { border: 1px solid grey; border-collapse: collapse; padding: 5px;}</style></head><body><div ng-app="myApp" ng-controller="customersCtrl"> <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></div><script>var app = angular.module('myApp', []);app.controller('customersCtrl', function($scope, $http) { $http.get("/try/angularjs/data/Customers_JSON.php") .success(function (response) {$scope.names = response.records;});});</script></body></html>Running effect:
| Alfreds Futterkiste | Germany |
| Ana Trujillo Emparedados y heldos | Mexico |
| Antonio Moreno Taquería | Mexico |
| Around the Horn | UK |
| B's Beverages | UK |
| Berglunds snabbköp | Sweden |
| Blauer See Delikatessen | Germany |
| Blondel père et fils | France |
| Bólido Comidas preparedas | Spain |
| Bon app' | France |
| Bottom-Dollar Marketse | Canada |
| Cactus Comidas para llevar | Argentina |
| Centro comercial Moctezuma | Mexico |
| Chop-suey Chinese | Switzerland |
| Comércio Mineiro | Brazil |
The above is a compilation of AngularJS form materials, and we will continue to add them later. I hope it can help students in need.