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

如你所见它只是遍历葡萄酒阵列并过滤掉你想要的东西......

创建过滤器后，只需将其放入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>

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

<强>更新

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

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

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

使用AngularJS构建动态多参数筛选器列表

1 个答案: