ng-repeat 指令可以完美的显示表格。
在表格中显示数据
使用 angular 显示表格是非常简单的：
AngularJS 实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://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>
运行结果：
Alfreds Futterkiste
Germany
Ana Trujillo Emparedados y helados
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 preparadas
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
使用 CSS 样式
为了让页面更加美观，我们可以在页面中使用CSS：
CSS 样式
</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>
运行结果：
Alfreds Futterkiste
Germany
Ana Trujillo Emparedados y helados
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 preparadas
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
使用 orderBy 过滤器
排序显示，可以使用 orderBy 过滤器:
AngularJS 实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://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>
运行效果：