我有一个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列表中具有这些参数的葡萄酒（法国的红色和白色葡萄酒列表）。
我尝试了许多解决方案，但没有结果。似乎很难编码！！
您可以为此构建自定义过滤器，并将其与过滤器复选框绑定...
首先建立一个自定义过滤器...这是我的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;
};
});
如您所见，只需遍历酒类阵列并过滤出您想要的东西...
创建过滤器后，只需将其放入ng-repeatHTML中即可。
<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 ...
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句