Question

我有以下Angular template。这很好地替换了每行的样式类，使even-numbered rows有一个类而odd-numbered rows有不同的类：

<tbody>
  <tr ng-repeat="currElement in myCtrl.elementList track by $index" >
    <td ng-class-odd="'element-tilt-left'" ng-class-even="'element-tilt-right'">
      <a ui-sref="myState({elementId: currElement.elementId)" ng-bind="currElement.name">
      </a>
    </td>
  </tr>
</tbody>

但是现在我想要在4种不同的风格类中循环，而不是只有两种。我该怎么办？

Answer 1

我喜欢Divyanshu的答案，但不是列出所有类，而是建议只计算内联类名：

ng-class="'class' + $index%4"

以下是对小提琴的更新：http://jsfiddle.net/uL5zd8sy/1/

Answer 2

您应该只能将CSS与nth-child选择器...

一起使用

＆＃13;

angular.module('so', []).run(function($rootScope) {
  $rootScope.elementList = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(function(i) {
    return { name: 'Item ' + i };
  });
});

＆＃13;

tr:nth-child(4n-3) td {
  background-color: red;    /* Style #1 */
}
tr:nth-child(4n-2) td {
  background-color: green;  /* Style #2 */
}
tr:nth-child(4n-1) td {
  background-color: blue;   /* Style #3 */
  color: white;
}
tr:nth-child(4n) td {
  background-color: black;  /* Style #4 */
  color: white;
}

＆＃13;

<table ng-app="so">
  <tbody>
    <tr ng-repeat="currElement in elementList track by $index">
      <td>
        <a ng-bind="currElement.name"></a>
      </td>
    </tr>
  </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

＆＃13;

Answer 3

您可以尝试以下方式：

ng-class="{class1 : $index%4 == 0, class2 : $index%4 == 1, class3 : $index%4 == 2, class4 : $index%4 == 3}"

查看this小提琴。

Answer 4

希望this would be helpful。

.row:nth-child(4n+1){
  color: red;
}

.row:nth-child(4n+2){
  color: green;
}

.row:nth-child(4n+3){
  color: grey;
}

.row:nth-child(4n+4){
  color: blue;
}

这样可以节省角度摘要周期

Angular：如何替换列表的CSS类，超过2个类？

4 个答案: