angularjs - 带有类值过滤器的 Angular ng-class

Question

我有一个带有 ng-repeat 的表 tr，其中我根据时间对行的背景进行了着色。 colorClassFilter 根据传入的时间返回一个类值:

<tr ng-repeat="object in objects" class={{object.time | colorClassFilter}}>
    <td>...
    <td>...
</tr>

效果很好，但现在我想添加一个复选框，允许用户打开/关闭着色，绑定(bind)到一个名为 useRowColors 的 bool 值。我想有条件地使用 ng-class 但不知道该怎么做。这是我尝试过的方法，但行不通。

<tr ng-repeat="object in objects" ng-class="{ object.time | colorClassFilter : useRowColors }">

编辑:阅读 jitch_it 的回复(不起作用)后，我尝试了以下方法:

<tr ng-repeat="object in objects" ng-class="{'{{object.time | colorClassFilter}}' : useRowColors}">

这是它在 DOM 中为 useRowColors true 生成的结果:

<tr class="ng-scope ''" ng-class="{'rowColorBlue' : useRowColors}" ng-repeat="object in objects" >

而不是这个(这是我期望看到的):

<tr class="rowColorBlue" ng-class="{'rowColorBlue' : useRowColors}" ng-repeat="object in objects" >

我猜我需要通过 Angular 进行另一个级别的编译？我错过了什么？

Answer 1

您无法通过 ng-class 属性轻松使用过滤器。但是，您可以像以前一样使用普通的 class 属性来实现所需的功能:

<tr ng-repeat="object in objects" class="{{useRowColor && (object.time | colorClassFilter) || ''}}">
  <td>...</td>
  <td>...</td>
</tr>

有相关答案详细解释了何时使用 class 代替 ng-class How can I use AngularJS filter in ngClass?