AngularJS快速入门指南08：表格

　　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>

运行

原标题：AngularJS快速入门指南08：表格

关键词：JS