一、ng-repeat 显示表格
ng-repeat 指令非常适合用来循环渲染表格数据。
数据源（a.json）
{
"records": [
{ "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" }
]
}Code language: JSON / JSON with Comments (json)HTML + Controller
<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("a.json")
.then(function (result) {
$scope.names = result.data.records;
});
});
</script>
</body>Code language: HTML, XML (xml)二、添加 CSS 样式
为了让表格更美观，可以添加 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>Code language: HTML, XML (xml)三、排序显示（orderBy 过滤器）
使用 orderBy 过滤器可以按指定字段排序：
<table>
<tr ng-repeat="x in names | orderBy : 'Country'">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>Code language: HTML, XML (xml)四、转换为大写（uppercase 过滤器）
使用 uppercase 过滤器将文本转为大写：
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country | uppercase }}</td>
</tr>
</table>Code language: HTML, XML (xml)五、显示序号（$index）
在 <td> 中使用 $index 可以显示行号（从 1 开始）：
<table>
<tr ng-repeat="x in names">
<td>{{ $index + 1 }}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>Code language: HTML, XML (xml)
$index从 0 开始，所以通常写成$index + 1。
六、使用 even和odd
ng-repeat 提供了两个内置变量：
| 变量 | 说明 |
|---|---|
$odd | 奇数行（true/false） |
$even | 偶数行（true/false） |
可以用 ng-if 实现隔行变色：
<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>Code language: HTML, XML (xml)也可以直接用 CSS 的
nth-child实现隔行变色，代码更简洁。
七、总结
| 功能 | 用法 |
|---|---|
| 循环渲染 | ng-repeat="x in names" |
| 排序 | orderBy : '字段名' |
| 转大写 | uppercase 过滤器 |
| 显示序号 | $index + 1 |
| 隔行变色 | $odd / $even 或 CSS nth-child |
Previous: 使用 ng-options
Next: AngularJS 操作 DOM 元素