减小字体
增大字体- ·上一篇文章：AngularJS Select(选择框)
- ·下一篇文章：AngularJS SQL
AngularJS 表格
AngularJS 表格ng-repeat 指令可以完美的显示表格。在表格中显示数据使用 angular 显示表格是非常简单的：AngularJS 实例<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https:
//cdn.bootcss.com/angular.js/1.6.3/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").then(function (result) {$scope.names = result.data.records;});});</script>尝试一下 ?废弃声明 (v1.5)v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。如果你使用的是 v1.5 以下版本，可以使用以下代码：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;});});Customers_JSON.php 文件代码：<?phpecho <<<EOT{"records":
[{"Name":
"Alfreds Futterkiste","City":
"Berlin","Country":
"Germany"},{"Name":
"Ana Trujillo Emparedados y helados","City":
"México D.F.","Country":
"Mexico"},{"Name":
"Antonio Moreno Taquería","City":
"México D.F.","Country":
"Mexico"},{"Name":
"Around the Horn","City":
"London","Country":
"UK"},{"Name":
"B's Beverages","City":
"London","Country":
"UK"},{"Name":
"Berglunds snabbk?p","City":
"Lule?","Country":
"Sweden"},{"Name":
"Blauer See Delikatessen","City":
"Mannheim","Country":
"Germany"},{"Name":
"Blondel père et fils","City":
"Strasbourg","Country":
"France"},{"Name":
"Bólido Comidas preparadas","City":
"Madrid","Country":
"Spain"},{"Name":
"Bon app'","City":
"Marseille","Country":
"France"},{"Name":
"Bottom-Dollar Marketse","City":
"Tsawassen","Country":
"Canada"},{"Name":
"Cactus Comidas para llevar","City":
"Buenos Aires","Country":
"Argentina"},{"Name":
"Centro comercial Moctezuma","City":
"México D.F.","Country":
"Mexico"},{"Name":
"Chop-suey Chinese","City":
"Bern","Country":
"Switzerland"},{"Name":
"Comércio Mineiro","City":
"S?o Paulo","Country":
"Brazil"}]}EOT;?>使用 CSS 样式为了让页面更加美观，我们可以在页面中使用CSS：CSS 样式<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>尝试一下 ?使用 orderBy 过滤器排序显示，可以使用 orderBy 过滤器:
AngularJS 实例<table> <tr ng-repeat="x in names | orderBy :
'Country'"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr></table>尝试一下 ?使用 uppercase 过滤器使用 uppercase 过滤器转换为大写:
AngularJS 实例<table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country| uppercase }}</td> </tr></table>尝试一下 ?显示序号 ($index)表格显示序号可以在 <td> 中添加 $index:
AngularJS 实例<table> <tr ng-repeat="x in names"> <td>{{ $index + 1 }}</td> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr></table>尝试一下 ?使用 $even 和 $oddAngularJS 实例<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>尝试一下 ?
//cdn.bootcss.com/angular.js/1.6.3/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").then(function (result) {$scope.names = result.data.records;});});</script>尝试一下 ?废弃声明 (v1.5)v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。如果你使用的是 v1.5 以下版本，可以使用以下代码：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;});});Customers_JSON.php 文件代码：<?phpecho <<<EOT{"records":
[{"Name":
"Alfreds Futterkiste","City":
"Berlin","Country":
"Germany"},{"Name":
"Ana Trujillo Emparedados y helados","City":
"México D.F.","Country":
"Mexico"},{"Name":
"Antonio Moreno Taquería","City":
"México D.F.","Country":
"Mexico"},{"Name":
"Around the Horn","City":
"London","Country":
"UK"},{"Name":
"B's Beverages","City":
"London","Country":
"UK"},{"Name":
"Berglunds snabbk?p","City":
"Lule?","Country":
"Sweden"},{"Name":
"Blauer See Delikatessen","City":
"Mannheim","Country":
"Germany"},{"Name":
"Blondel père et fils","City":
"Strasbourg","Country":
"France"},{"Name":
"Bólido Comidas preparadas","City":
"Madrid","Country":
"Spain"},{"Name":
"Bon app'","City":
"Marseille","Country":
"France"},{"Name":
"Bottom-Dollar Marketse","City":
"Tsawassen","Country":
"Canada"},{"Name":
"Cactus Comidas para llevar","City":
"Buenos Aires","Country":
"Argentina"},{"Name":
"Centro comercial Moctezuma","City":
"México D.F.","Country":
"Mexico"},{"Name":
"Chop-suey Chinese","City":
"Bern","Country":
"Switzerland"},{"Name":
"Comércio Mineiro","City":
"S?o Paulo","Country":
"Brazil"}]}EOT;?>使用 CSS 样式为了让页面更加美观，我们可以在页面中使用CSS：CSS 样式<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>尝试一下 ?使用 orderBy 过滤器排序显示，可以使用 orderBy 过滤器:
AngularJS 实例<table> <tr ng-repeat="x in names | orderBy :
'Country'"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr></table>尝试一下 ?使用 uppercase 过滤器使用 uppercase 过滤器转换为大写:
AngularJS 实例<table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country| uppercase }}</td> </tr></table>尝试一下 ?显示序号 ($index)表格显示序号可以在 <td> 中添加 $index:
AngularJS 实例<table> <tr ng-repeat="x in names"> <td>{{ $index + 1 }}</td> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr></table>尝试一下 ?使用 $even 和 $oddAngularJS 实例<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>尝试一下 ?
AngularJS 表格
