Question

我制作了两个非常相似的自定义滤镜。这两个过滤器之间唯一不同的是正在使用的数组。因此，我想制作一个自定义过滤器，并为其提供一个数组作为参数。然后我将传递给函数的数组是$ rootScope.selectedCategories和$ rootScope.selectedBrands。现在我的问题是我不知道在哪里声明一个我可以作为过滤器参数的变量，如下所示。

<div class="productContentBox" ng-repeat="top in store.tops | categoryFilter: argument1 | orderBy: propertyName">

我已经尝试在我的控制器中创建一个范围变量，它看起来像下面的代码。然后使用'categoryArray'作为我的categoryFilter的参数（所以在上面的代码中用'categoryArray'替换'argument1'）。但是这没有用，我认为原因是因为我认为它没有使用当前的$ rootScope.selectedCategories更新（这个数组不是静态的，可以根据复选框进行更改）。

$scope.categoryArray = $rootScope.selectedCategories;

以下是第一个过滤器的代码：

  // Filter that filters on the products' category.
  app.filter('categoryFilter', ['$rootScope', function($rootScope) {
    return function(items) {
      // Show all products if all filters are deselected.
      if ($rootScope.selectedCategories.length == 0 || checkOnlyFalse($rootScope.selectedCategories))  {
        return items;
      }
      else {
        var filtered = [];
        for(var i=0; i < items.length; i++) {
          var item = items[i];
          // Push the products that match the filter criteria on the array.
          for (var j=0; j < $rootScope.selectedCategories.length; j++)
          if (item.category == $rootScope.selectedCategories[j]){
            filtered.push(item);
          }
        }
        return filtered;
      }
    };
  }]);

以下是第二个过滤器的代码：

  // Filter that filters on the products' brand.
  app.filter('brandFilter', ['$rootScope', function($rootScope) {
    return function(items) {
      // Show all products if all filters are deselected.
      if ($rootScope.selectedBrands.length == 0 || checkOnlyFalse($rootScope.selectedBrands))  {
        return items;
      }
      else {
        var filtered = [];
        for(var i=0; i < items.length; i++) {
          var item = items[i];
          // Push the products that match the filter criteria on the array.
          for (var j=0; j < $rootScope.selectedBrands.length; j++)
          if (item.brand == $rootScope.selectedBrands[j]){
            filtered.push(item);
          }
        }
        return filtered;
      }
    };
  }]);

Answer 1

这是一个简单的解决方案

app.filter('productFilter', ['$rootScope', function($rootScope) {
  return function(items,filterOn) {
    var filtered = [];
    // Show all products if all filters are deselected.
    if('categories'===filterOn) {
      if ($rootScope.selectedCategories.length == 0 || checkOnlyFalse($rootScope.selectedCategories))  {
      filtered=items;
      } else {
        for(var i=0; i < items.length; i++) {
          var item = items[i];
          // Push the products that match the filter criteria on the array.
          for (var j=0; j < $rootScope.selectedCategories.length; j++) {
            if (item.category == $rootScope.selectedCategories[j]){
              filtered.push(item);
            }
          }
        }
      }
    } else if('brands'===filterOn) {
    // Show all products if all filters are deselected.
        if ($rootScope.selectedBrands.length == 0 || checkOnlyFalse($rootScope.selectedBrands))  {
          filtered=items;
        } else {
          var filtered = [];
          for(var i=0; i < items.length; i++) {
            var item = items[i];
            // Push the products that match the filter criteria on the array.
            for (var j=0; j < $rootScope.selectedBrands.length; j++)  {
              if (item.brand == $rootScope.selectedBrands[j]){
              filtered.push(item);
              }
            }
          }
        }
     }
     return filtered;
   };
}]);

这可以在你的html中用作

<div class="productContentBox" ng-repeat="top in (store.tops | product: 'categories') | orderBy: category">

将我制作的两个自定义过滤器组合成一个自定义过滤器的好方法是什么？

1 个答案: