0

我有一个复选框列表，我想用它来过滤列表。复选框列表是硬代码，如下所示：

<input type="checkbox" ng-model="characteristics.nontraditional" ng-true-value="non-tradtional" ng-false-value="">&#160; Non Traditional<br>
<input type="checkbox" ng-model="characteristics.metal" ng-true-value="metal" ng-false-value="">&#160; Metal<br>
<input type="checkbox" ng-model="characteristics.plancha" ng-true-value="plancha" ng-false-value="">&#160; Plancha<br>
<input type="checkbox" ng-model="characteristics.rocket" ng-true-value="rocket" ng-false-value="">&#160; Rocket<br>
<input type="checkbox" ng-model="characteristics.wick" ng-true-value="wick" ng-false-value="">&#160; Wick

我的 ng-repeat 看起来像这样：

<div ng-repeat="stove in stoves | filteredstoves:characteristics">

我的自定义过滤器看起来像这样：

stovecat.filter('filteredstoves', function() {
  return function(stoves, characteristics) { 
    alert(characteristics)
         }
    } 
}

当我加载页面时。警报包含“未定义”，这是预期的，因为没有选中任何复选框。当我选择一个或多个复选框时，警报包含 [Object object]，这很好，因为现在将对象传递到自定义过滤器中。如何访问传递给我的自定义过滤器的这些值，以便我可以相应地过滤列表？有什么我想念的吗？

谢谢各位！

4

1 回答 1

2

Plunker 解决方案：http ://plnkr.co/edit/7PhNEADHW099w9kaqS7M?p=preview

模板：

<input type="checkbox" ng-model="characteristics.nontraditional">&#160; Non Traditional</input><br>
<input type="checkbox" ng-model="characteristics.metal">&#160; Metal</input><br>
<input type="checkbox" ng-model="characteristics.plancha">&#160; Plancha</input><br>
<input type="checkbox" ng-model="characteristics.rocket">&#160; Rocket</input><br>
<input type="checkbox" ng-model="characteristics.wick">&#160; Wick</input><br/>

<div ng-repeat="stove in stoves | filteredstoves:characteristics">{{stove.name}} - {{stove.characteristics}}</div>

筛选：

stovecat.filter('filteredstoves', function() {
  return function(stoves, characteristics) {
    var result = stoves.slice(); // copy array
    angular.forEach(characteristics, function(value, key) {
      if(value) {
        for(var index = 0; index < result.length; index++) {
          stove = result[index];
          if(stove.characteristics.indexOf(key) == -1) {
            result.splice(index--,1);
          }
        }
      }
    });
    return result;
  }
});

只需检查过滤器中的所有特征并删除没有它们的项目

于 2013-07-11T12:27:33.620 回答