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 helados
Mexico
Antonio Moreno Taquería
Mexico
Centro comercial Moctezuma
Mexico
Bólido Comidas preparadas
Spain
Berglunds snabbköp
Sweden
Chop-suey Chinese
Switzerland
Around the Horn
UK
B's Beverages
UK
使用 uppercase 过滤器
使用 uppercase 过滤器转换为大写:
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"> <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>
运行效果：
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
显示序号 ($index)
表格显示序号可以在 <td> 中添加 $index:
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"> <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>
运行效果：