javascript - 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;
    }
  }

让我解释一下这个函数。首先我们收到 ng-repeat 的行通过验证参数，然后我应用第一个 if条件基本上是你之前写的任何东西，顺便说一句，这段代码工作得很好。然后我使用 $filter 检查行$scope.mySecondFilter 中存在的对象的语法, 引用 here有关使用 $filter 过滤的更多信息, 这将基本上检查传递的行是否包含所需的对象属性并返回 true或 false .

这是您的代码的工作示例以供引用。

JSFiddle Demo

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