javascript - Angular - 使用条件 $odd/$even 以及 ngClass 的 ng-repeated 属性

Question

我有一个像这样的 ng-repeat:

<div ng-repeat="item in data">
  {{item.text}}
</div>

我想在这里做两件事:

1. 如果项目是$odd，给它一个类“tableOdd”；如果 $even，给它“tableEven”。
2. 同时向引用 item.ItemStatus 的元素添加一个类。

出于各种原因(这与 Angular Material 和 md-virtual-repeat 在表格布局上一起使用)，我无法将元素作为子元素或父元素添加到此 ng-repeat 中额外的 ng 类。

我试过:

  ng-class="{ item.ItemStatus + 'tableEven': $even, 
     item.ItemStatus + 'tableOdd': $odd }"

还试过:

  ng-class="{{ $even ? item.ItemStatus + ' tableEven': 
     ($odd ? item.ItemStatus + ' tableOdd': item.ItemStatus) }}"

但都给出错误。如何最好地实现这一目标？

Answer 1

您可以根据每个项目中的 ItemStatus 值使用 Angular 表达式添加类，然后使用 ng-class 添加甚至或添加类，如下所示。

请注意在属性名称之前使用 :: 来创建一次性绑定(bind)，这意味着表达式只实现一次值。如果您想通过更新数组中的 ItemStatus 值来更新您的类，您可以删除 :: 并使用 {{item.ItemStatus}}

<li class="{{::item.ItemStatus}}" ng-repeat="item in data"
        ng-class="{ 'tableEven': $even , 'tableOdd': $odd }">
      {{item.text}}
</li>

这是一个示例 Pen在行动中。