AngularJS快速入门指南08:表格
2015-05-12 01:57
501 查看
ng-repeat指令非常适合用来显示表格。
运行
运行
运行
运行
运行
运行
上一章 - AngularJS快速入门指南07:Http对象
下一章 - AngularJS快速入门指南09:SQL
在表格中显示数据
在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) { $scope.names = [{ "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" }]; }); </script>
运行
加上样式
为了使上面的表格更好看,我们在页面上加上一些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过滤器:<table> <tr ng-repeat="x in names | orderBy : 'Country'"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table>
运行
加上uppercase过滤器
要显示大写形式,添加uppercase过滤器:<table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country | uppercase }}</td> </tr> </table>
运行
显示行号($index)
要显示行号,在<td>中添加$index:<table> <tr ng-repeat="x in names"> <td>{{ $index + 1 }}</td> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table>
运行
使用$even和$odd
<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快速入门指南07:Http对象
下一章 - AngularJS快速入门指南09:SQL
相关文章推荐
- [乐意黎转载]AngularJS快速入门指南08:表格
- AngularJS快速入门指南20:快速参考
- AngularJS快速入门指南17:Includes
- [乐意黎转载]AngularJS快速入门指南10:DOM节点
- AngularJS快速入门指南18:Application
- AngularJS快速入门指南11:事件
- AngularJS快速入门指南15:API
- AngularJS快速入门指南19:示例代码
- AngularJS快速入门指南07:Http对象
- [乐意黎转载]AngularJS快速入门指南01:导言
- [乐意黎转载]AngularJS快速入门指南09:SQL
- AngularJS快速入门指南04:指令
- AngularJS快速入门指南09:SQL
- AngularJS快速入门指南16:Bootstrap
- AngularJS快速入门指南10:DOM节点
- AngularJS快速入门指南12:模块
- AngularJS快速入门指南01:导言
- AngularJS快速入门指南05:控制器
- [乐意黎转载]AngularJS快速入门指南06:过滤器
- AngularJS快速入门指南02:介绍