使用 AngularJS 构建动态多参数过滤器列表

Question

我有一个 json 酒单，我的愿望是用 AngularJS 构建一个代码来过滤结果

json 文件

[
{ "name": "Wine a", "type": "red", "country": "france", "style": "strong" },
{ "name": "Wine a", "type": "white", "country": "italie", "style": "medium" },
{ "name": "Wine a", "type": "white", "country": "france", "style": "light" },
{ "name": "Wine a", "type": "rose", "country": "usa", "style": "strong" },
{ "name": "Wine a", "type": "champagne", "country": "chili", "style": "medium" },
{ "name": "Wine a", "type": "red", "country": "brazil", "style": "strong" },
{ "name": "Wine a", "type": "red", "country": "france", "style": "strong" }

]

复选框

<div ng-controller="MainCtrl">
    <input ng-model="red" type="checkbox" >red</input>
    <input ng-model="white" type="checkbox" >white</input>
    <input ng-model="rose" type="checkbox" >rose</input>
    <input ng-model="champagne" type="checkbox" >champagne</input>

    <input ng-model="france" type="checkbox" >france/input>
    <input ng-model="italie" type="checkbox" >italie</input>
    <input ng-model="brazil" type="checkbox" >brazil</input>
    <input ng-model="chili" type="checkbox" >chili</input>

    <input ng-model="strong" type="checkbox" >strong</input>
    <input ng-model="medium" type="checkbox" >medium</input>
    <input ng-model="light" type="checkbox" >light</input>

</div>

我的愿望

我的愿望是建立一个动态的多参数过滤器列表，列表的结果将与复选框的值匹配。

• 如果我检查红色和烈性，将出现在列表中，只有带有这些参数的 json 列表中的葡萄酒（红色和烈性葡萄酒的列表）。

• 如果我检查红色、白色和法国，将出现在列表中，只有带有这些参数的 json 列表中的葡萄酒（法国红葡萄酒和白葡萄酒的列表）。

我尝试了许多解决方案，但没有结果。好像很难写代码！！

Answer 1

您可以为此构建自定义过滤器并将其与您的过滤器复选框绑定...

这里是PLUNKER 演示我为所有葡萄酒类型所做的...

首先构建一个自定义过滤器...这是我的 winetype 过滤器示例...

app.filter('winetypefilter', function () {
  return function(input, filter) {
    var result = [];
    angular.forEach(input, function (wine) {
        angular.forEach(filter, function (isfiltered, type) {
            if (isfiltered && type === wine.type) {
                result.push(wine);
            }
        });
    });
    return result;
  };
});

如你所见，它只是遍历 wine 数组并过滤掉你想要的......

创建过滤器后，只需将其放入您的 html 中的 ng-repeat...

<ul>
  <li ng-repeat="wine in wines | winetypefilter:winetypes">
    {{wine.name}} is a {{wine.type}} with {{wine.style}} style from {{wine.country}}
  </li>
</ul>

如您所见，我们的自定义过滤器需要一个参数，例如 winetypes，它是我们控制器中的复选框值数组和 html 代码中绑定的复选框...

$scope.winetypes = {red : true,white : true,rose : true, champagne : true};

这里是它的 html...

<li ng-repeat="(type, value) in winetypes">
  <input type="checkbox" ng-model="winetypes[type]" /> {{type}}
</li>

您可以为其他属性创建其他过滤器，或者将它们全部放入一个过滤器中，这是您的选择...

更新

当然你可以动态启用禁用你的过滤器...有很多方法可以做到这一点我想到的最简单的解决方案就是发送第三个参数作为布尔值来检查过滤器是否启用...

这里是更新的过滤器示例...

app.filter('winetypefilter', function () {
  return function(input, filter, isEnable) {
    // if isEnable then filter out wines
    if (isEnable) {
      var result = [];
      angular.forEach(input, function (wine) {
          angular.forEach(filter, function (isfiltered, type) {
              if (isfiltered && type === wine.type) {
                  result.push(wine);
              }
          });
      });
      return result;
    } 
    // otherwise just do not any filter just send input without changes
    else{
      return input
    }
  };
});

这里更新了PLUNKER...