Question

我有一个包含多个过滤器的ng-repeat列表，但由于我需要隐藏而不是从DOM中删除，我使用ng-show进行过滤。

这是我的第一个过滤器的样子：

jellyfish

第二个：

<a href="" ng-click="myFilter = ''; toggle = toggle=0; togglesec=0; mySecondFilter = {}" ng-class="{'active' : toggle==0}" >
   Tot
</a>

<a href="" ng-click="myFilter = 'pa'; toggle = toggle=1;  togglesec=0;  mySecondFilter = {}" ng-class="{'active' : toggle==1}">
   Pa
</a>

<a href="" ng-click="myFilter = 'Reposteria'; toggle = toggle=2; togglesec=0; mySecondFilter = {}" ng-class="{'active' : toggle==2}">
   Reposteria
</a>

现在，我能够使用ng-show和第一个过滤器过滤ng-repeat，如下所示：

<div ng-init="togglesec=0; mySecondFilter = {}">
   <a ng-click="mySecondFilter = {}; togglesec = togglesec=0" ng-class="{'active' : togglesec==0}">
       All
   </a>
   <a ng-click="mySecondFilter = {'vegan': true}; togglesec = togglesec=1" ng-class="{'active' : togglesec==1}">
       Vegan
   </a>
   <a ng-click="mySecondFilter = {'gluten': true}; togglesec = togglesec=2" ng-class="{'active' : togglesec==2}">
       Gluten Free
   </a>
</div>

基本上它会将 myFilter 的值与 pa.tipus 对象属性进行比较，并且运行正常。

但它不能使用第二个过滤器，因为mySecondFilter是一个对象，而不是一个字符串（它需要过滤包含素食主义者的结果或 gluten：true ）

以下是我的对象类型的示例：

<div ng-repeat="pa in products" ng-show="pa.tipus.indexOf(myFilter) != -1">

关于如何在同一个ng-show中组合两个过滤器的任何提示？

修改

我已经应用了Naren的答案，但点击任何过滤器时出现以下错误：

pa {
    tipus : 'pa',
    gluten : false,
    vegan : true
}

我还试图通过添加这个来初始化myFilter，但没有运气，同样的错误出现了：

angular.min.js:122 TypeError: Cannot create property 'vegan' on string ''.

Answer 1

<强>更新

由于用户想要过滤的通用版本。以下功能应该是答案。

$scope.validate = function(row) {
    for (var key in $scope.myFilter) {
      if ($filter('filter')([row], {
          [key]: $scope.myFilter[key]
        }).length === 0) {
        return false;
      }
    }
    return true;
  }

在我们遍历存储所有过滤器的对象的地方，如果不满足任何过滤器，则返回false。

请查看以下示例，了解过滤器的工作原理。

JSFiddle Demo

<强>旧

这是我的修复版本。 Angular的$filter非常适合用属性识别对象，但是这不可能用HTML编写，因此我调用一个函数，它将返回true或false给ng-show。

  $scope.validate = function(row) {
    if (row.tipus.indexOf($scope.myFilter) != -1) {
      if ($filter('filter')([row], $scope.mySecondFilter).length !== 0) {
        return true;
      } else {
        return false;
      }
    } else {
      return false;
    }
  }

让我解释一下这个功能。首先，我们通过validate参数接收ng-repeat的行，然后我应用第一个if条件，这基本上是你之前写的，这段代码很有用。然后我使用$filter中$scope.mySecondFilter对象的$filter语法检查行，有关使用true过滤的更多信息，请参阅here，这将基本检查传递的行是否包含必需的对象属性并返回false或IFERROR([formula],0)。

以下是您的代码的工作示例供参考。

JSFiddle Demo

如果这完全解决了您的问题，请告诉我。）

ng-show使用ng-repeat中的多个过滤器

修改

1 个答案: