首页 > 代码库 > AngularJS 表格
AngularJS 表格
ng-repeat 指令可以完美的显示表格。
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
1、排序显示,可以使用 orderBy 过滤器:
<table>
<tr ng-repeat="x in names | orderBy : ‘Country‘">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
2、使用 uppercase 过滤器转换为大写:
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country | uppercase }}</td>
</tr>
</table>
3、表格显示序号可以在 <td> 中添加 $index:
<table>
<tr ng-repeat="x in names">
<td>{{ $index + 1 }}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
4、使用$even和$odd添加属性
<table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style=" margin: 0px; padding: 0px; color: rgb(17, 119, 0); font-family: ‘courier new‘; font-size: 13.2px; line-height: normal;">>{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style=" margin: 0px; padding: 0px; color: rgb(17, 119, 0); font-family: ‘courier new‘; font-size: 13.2px; line-height: normal;">>{{ x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>
</tr>
</table>
AngularJS 表格