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

Question

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

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

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

第二个：

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

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

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

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

但它不适用于第二个过滤器，因为 mySecondFilter 是一个对象，而不是一个字符串（它需要过滤包含 vegan:true 或 gluten:true 的结果强>)

这是我的对象类型的示例：

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

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

编辑

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

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

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

$scope.myFilter = {
  tipus : '',
  vegan : '',
  gluten : '',
  lactosa : ''
};

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 过滤的更多信息，请参阅here，这将基本上检查传递的行是否包含所需的对象属性并返回@987654333 @ 或false。

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

JSFiddle Demo

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