AngularJS | ng-class-even指令

简介

ng-class-even是AngularJS中一个用于动态绑定class的指令。它可以用于添加一个偶数行的类名，可以帮助程序员简单、快速地实现交替颜色的表格或列表。

语法

语法如下：

<element ng-class-even="class name"></element>

• class name为要添加的类名。

例子

在下面的例子中，我们将使用ng-class-even指令来实现表格每隔一行改变一种背景颜色的效果。

<table>
  <tr ng-repeat="item in items" ng-class-even="'evenRow'">
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
  </tr>
</table>

<style>
  .evenRow {
    background-color: #f7f7f7;
  }
</style>

上述代码会让表格每隔一行就将奇数行添加class="evenRow"，从而改变该行的背景颜色。

注意事项

• ng-class-even只能用于ng-repeat指令循环中。
• ng-class-even只会在偶数行添加class，奇数行不会添加。如果你想对奇数行也添加class，可以使用ng-class-odd指令。
• 可使用ng-class-even和ng-class-odd同时使用，来为表格每行添加不同的类名。

完整代码如下：

<table>
  <tr ng-repeat="item in items" ng-class-even="'evenRow'" ng-class-odd="'oddRow'">
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
  </tr>
</table>

<style>
  .evenRow {
    background-color: #f7f7f7;
  }
  .oddRow {
    background-color: #ffffff;
  }
</style>

总结

ng-class-even指令是AngularJS中用于动态绑定class的指令之一。使用它可以方便快捷地为表格等元素添加交替颜色的效果。在使用时，需要注意它只能用于ng-repeat循环中，并且只会在偶数行添加class。