AngularJS入门教程之表格实例详解
|
| 51自学网 http://www.wanshiok.com |
AngularJS,表格实例,AngularJS,表格详解,AngularJS中的表格AngularJS 表格
ng-repeat 指令可以完美的显示表格。
在表格中显示数据
使用 angular 显示表格是非常简单的：
AngularJS 实例 <!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>运行结果： | |
| | 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="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> 运行效果： | 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="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>运行效果： | 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="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>运行效果： | 1 | Alfreds Futterkiste | Germany | | 2 | Ana Trujillo Emparedados y helados | 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 preparadas | 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 | 使用 $even 和 $odd
AngularJS 实例 <!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>运行效果： | 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 | 以上就是对AngularJS 表格资料的整理，后续继续补充,希望能帮助到有需要的同学。
AngularJS,表格实例,AngularJS,表格详解,AngularJS中的表格
|
