AngularJS：如何显示来自许多复选框的许多结果

Question

我正在使用 AngularJS 来过滤酒单的结果。葡萄酒按颜色（红色、白色、玫瑰色、香槟色）和其他参数进行分类。

当使用复选框选中一种颜色（例如红色）时，会出现经过过滤的红酒列表。但选择两种颜色时，不会出现任何结果（例如，红色和白色）。

我的愿望：

• 即使选中了红色、白色和香槟色，也会显示（红色、白色和香槟酒或其他参数）的列表。我的主要愿望是能够选择多个参数，并显示所有选中的参数。能够检查颜色，国家..

这里是代码示例：

<div ng-controller="MainCtrl">

<input ng-model="characteristics.red" type="checkbox" >red</input>
<input ng-model="characteristics.white" type="checkbox" >white</input>
<input ng-model="characteristics.rose" type="checkbox" >rose</input>
<input ng-model="characteristics.champagne" type="checkbox" >champagne</input>
    <br><br>

<div ng-repeat="wine in filtered= (wines |filteredstoves:characteristics) |       filteredstoves:characteristics">

    {{wine.name}} - {{wine.characteristics}}
        </div>
    <br><br>
     Filtered list has {{filtered.length}} items
</div>

代码演示： http://jsfiddle.net/stefanos/kTYdd/26/

问候，

史蒂芬

Answer 1

尝试像这样更新您的过滤器：

.filter('filteredstoves', function() {
  return function(stoves, characteristics) {
    var result = []; 
    angular.forEach(characteristics, function(value, key) {
      if(value) {
        for(var index = 0; index < stoves.length; index++) {
          var wine = stoves[index];
          if(wine.characteristics.indexOf(key) >= 0) {
            if (result.indexOf(wine) === -1){
                result.push(wine);
            }
          }
        }
      }
    });
    return result;
  }
});

DEMO