Question

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

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

效果很好，但现在我想添加一个复选框，允许用户打开/关闭着色，绑定到名为useRowColors的布尔值。我想有条件地使用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生成的：

<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" >

我猜我需要以某种方式通过角度进行另一级别的编译？我错过了什么？

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?

Answer 2

这对我来说似乎过于复杂...... 我建议在表标记中使用css和helper类之间的组合。

我已经设置了这个plunker来演示它： http://plnkr.co/edit/28gP1GcnCdPMZWXxYegZ?p=preview

<input type="checkbox" ng-model="coloured"/> Coloured?

<table ng-class="{colouredTable: coloured}">
  <tr ng-repeat="item in items" ng-class="{evenrow: $index % 2 == 0}">
    <td>{{item.someValue}}</td>
  </tr>
</table>

希望有所帮助

Answer 3

不确定更改过滤器中对象类型（日期到类）是否是一个好习惯。但是，这是解决您的主要问题的方法。

首先在当前范围内定义一个开关。

然后在你的过滤器函数中传递一个第三个参数，它是一个开关，用于判断过滤器是否应该起作用。

然后在过滤器内部检查开关是否关闭，只需返回输入。如果开关关闭，这将返回您传递给它的整个列表。

在你的html属性中只需追加：后跟过滤器末尾的开关名称，它应该可以正常工作/

我没有你的过滤器代码所以我自己创建了一个带有开/关开关的样本过滤器。这是plnkr中提供的示例：

http://plnkr.co/edit/kc2j8aquHn2cqMDlcRQm?p=preview

以下是我在html中使用过滤器的方法。请注意在过滤器末尾使用filterSwitchOn。

<li ng-repeat="item in items | searchFilter:filterText:filterSwitchOn">{{item.name}}

下面的段将绑定html中的两个元素来设置开关和过滤文本：

<p>
  <input type="checkbox" ng-model="filterSwitchOn">Switch Filter On</input>
</p>
<input type="text" ng-model="filterText" />

最后，这是一个简化的角度应用程序，它提供了过滤器：

var app = angular.module('angularjs-starter', []);

app.filter('searchFilter', function() {
  return function(input, expected, filterSwitchOn) {
    if (!filterSwitchOn)
      return input;
    else {
      var out = [];
      for (var i = 0; i < input.length; i++) {
        for (var key in input[i]) {
          if (key !== undefined) {
            var fieldValue = input[i][key];
            if (String(fieldValue).indexOf(expected) >= 0) {
              out.push(input[i]);
              break;
            }
          }
        }
      }
      return out;
    }
  };
});
app.controller('MainCtrl', function($scope, $attrs) {
  $scope.items = [{
    name: "One",
    tester: true
  }, {
    name: "Two",
    tester: false
  }, {
    name: "Three",
    tester: true
  }, {
    name: "Four",
    tester: false
  }, {
    name: "Five",
    tester: true
  }, {
    name: "Six",
    tester: false
  }, ];

  $scope.filterText = 'o';
  $scope.filterSwitchOn = true;
});

您可以轻松地将此想法调整到您的过滤器。希望有所帮助。

Answer 4

您可以使用三元运算符来测试useRowColors的值。

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

具有类值过滤器的Angular ng-class

4 个答案: