你的位置:首页 > Java教程

[Java教程]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快速入门指南07:Http对象
下一章 - AngularJS快速入门指南09:SQL