[乐意黎转载]AngularJS快速入门指南08：表格

来源：互联网发布：unity3d开始界面添加编辑：程序博客网时间：2024/06/05 10:36

　ng-repeat指令非常适合用来显示表格。

在表格中显示数据

　　在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>

运行

0 0