我有一个类似的ng重复:
<div ng-repeat="item in data">
{{item.text}}
</div>
我想在这里做两件事:
- 如果该项是
$odd
,则给它一个类"tableOdd";如果是$even
,则给它"tableEven" - 还要向引用
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的多种使用方法的有用文章。