AngularJS入門教程之表格實例詳解
更新時間：2016年07月27日 17:33:53 投稿：lqh
本文主要介紹AngularJS 表格,這里給大家整理了相關(guān)知識,并附代碼實例,有需要的小伙伴可以參考下
AngularJS 表格
ng-repeat 指令可以完美的顯示表格。
在表格中顯示數(shù)據(jù)
使用 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>
運行結(jié)果：
| 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>
運行結(jié)果：
| 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 過濾器轉(zhuǎn)換為大寫:
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 表格資料的整理，后續(xù)繼續(xù)補充,希望能幫助到有需要的同學(xué)。
相關(guān)文章
這篇文章主要介紹了3個可以改善用戶體驗的AngularJS指令,AngularJS是一款具有很高人氣的JavaScript框架,需要的朋友可以參考下2015-06-06
Angular重構(gòu)數(shù)組字段的解決方法示例
這篇文章主要為大家介紹了Angular重構(gòu)數(shù)組字段的解決方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Angular.js與Bootstrap相結(jié)合實現(xiàn)表格分頁代碼
最近一直在學(xué)習(xí)angularjs相關(guān)知識，在學(xué)習(xí)過程中寫了一個小demo，下面把代碼思路分享給大家，感興趣的朋友一起學(xué)習(xí)2016-04-04
本文通過示例向大家介紹了AngularJS語法的使用，小伙伴們認(rèn)真研讀下吧，非常的實用哦。2015-01-01
本篇文章主要介紹了Angular2數(shù)據(jù)綁定的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
ios設(shè)備中angularjs無法改變頁面title的解決方法
今天小編就為大家分享一篇ios設(shè)備中angularjs無法改變頁面title的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Angular.js項目中使用gulp實現(xiàn)自動化構(gòu)建以及壓縮打包詳解
基于流的前端自動化構(gòu)建工具，利用gulp可以提高前端開發(fā)效率，特別是在前后端分離的項目中。下面這篇文章主要給大家介紹了關(guān)于在Angular.js項目中使用gulp實現(xiàn)自動化構(gòu)建以及壓縮打包的相關(guān)資料，需要的朋友可以參考下。2017-07-07
這篇文章主要記錄了一些在學(xué)習(xí)和使用angular.js踩到的坑和需要注意的點，方便以后自己查閱，也給同樣遇到這些問題的朋友們一些幫助，有需要的朋友們下面來一起看看吧。2016-10-10
在我們開發(fā)中經(jīng)常需要在頁面顯示給用戶的信息需要一定處理格式化，才能顯示給用戶。比如時間本地化，或者yyyy-MM-dd HH:mm:ss格式，數(shù)字精度格式化，本地化，人名格式化等等。在angularjs中為我們提供了叫filter的指令，讓我們能夠很輕易就能做到著一些列的功能2015-05-05
Angular實現(xiàn)的敏感文字自動過濾與提示功能示例
這篇文章主要介紹了Angular實現(xiàn)的敏感文字自動過濾與提示功能,結(jié)合實例形式分析了AngularJS針對字符串的輸入判定及實時顯示相關(guān)操作技巧,需要的朋友可以參考下2017-12-12