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

Angular - Using a conditional $odd / $even as well as an ng-repeated property with ngClass

本文关键字：ng ngClass 属性 以及 even 条件 odd Angular-      更新时间：2023-09-26

我有一个类似的ng重复：

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

我想在这里做两件事：

  1. 如果该项是$odd，则给它一个类"tableOdd"；如果是$even，则给它"tableEven"
  2. 还要向引用item.ItemStatus的元素添加一个类

由于各种原因（这是在表布局上与具有md-virtual-repeat的Angular Material一起使用的），我不能将元素作为子元素或父元素添加到带有额外ng类的ng repeat中。

我试过：

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

也尝试过：

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

但两者都会出现错误。如何最好地实现这一点？

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

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

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

这是一支钢笔的样品。

您可以使用ng类的字符串语法使其更加简单。例如：

<div ng-class="item.itemStatus + ($even ? ' classOdd' : ' classEven')"></div>

此外，您可能对ngClassEven和ngClassOdd感兴趣。它们与ngRepeat协同工作，允许您根据项是偶数还是奇数来设置类。

  <div ng-repeat="item in data" ng-class-odd="'tableOdd ' + item.ItemStatus" ng-class-even="'tableEven ' + item.ItemStatus">
      {{item.text}}
  </div>

下面是一篇关于ngClass的多种使用方法的有用文章。

相关文章：