AngularJS 表格

Posted 2020-08-16 miny_simp

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>