AngularJS 表格
ng-repeat 指令可以完美的顯示表格。
在表格中顯示數據
使用angular 顯示表格是非常簡單的：
AngularJS 實例
< 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.w3big.com/try/angularjs/data/Customers_JSON.php")
.success(function (response) {$scope.names = response.records;});
});
< /script >
< 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.w3big.com/try/angularjs/data/Customers_JSON.php")
.success(function (response) {$scope.names = response.records;});
});
< /script >
嘗試一下»
使用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>
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 >
< 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 >
< 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 >
< tr ng-repeat= "x in names" >
< td > {{ $index + 1 }} < /td >
< td > {{ x.Name }} < /td >
< td > {{ x.Country }} < /td >
< /tr >
< /table >
嘗試一下»
使用$even 和$odd
AngularJS 實例
< 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 >
< 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 >
嘗試一下»