构建angularJS过滤器

时间:2015-03-16 08:39:36

标签: angularjs filter

我正在尝试按字段过滤项目,当检查已激活时,我收到错误。

<input type="checkbox" ng-model="filterActive">
<input type="text" ng-model="reftext"/>
<input type="text" ng-model="nametext"/>


<tr ng-repeat="car in cars.items | togglableFilter:{reference:reftext, name:nametext}:filterActive">

</tr>


.filter('togglableFilter',[function(){
    return function(input, filterText, isFilterActive){

      if(!angular.isDefined(isFilterActive) || !isFilterActive) return input;
      var ret = input;
      var col = [];
      var isDefined = false;

      var key = Object.keys(filterText);

      for (var i = 0; i < key.length; i++) {

        if(angular.isDefined(filterText[key[i]])) {
          isDefined = true;
          angular.forEach(input, function (v) {
            if (v[key[i]].indexOf(filterText[key[i]]) !== -1) {
              col.push(v);
            }
          });
        }
      }

      if (isDefined) return col; else return input;
    }
  }]);

错误:[ngRepeat:dupes] errors.angularjs.org/1.2.13/ngRepeat/dupes?p0=car%20in%20cars.items%20%7C%20togglableFilter%3A%7Breference%3Areftext%2C

1 个答案:

答案 0 :(得分:0)

cars.items中有重复的条目,因此angular无法将唯一键与创建的DOM元素相关联。如果您在上面给出的URL中看到错误详细信息,则可以看到解决方案是使用{ {1}}使用track by $index唯一值angularJS可以跟踪模型和DOM之间的关联

$index

如果您在过滤数据时遇到一些困难,请尝试使用

 <tr ng-repeat="car in cars.items  track by $index | togglableFilter:{reference:reftext, name:nametext}:filterActive">