构建angularJS过滤器

Question

当检查被激活时，我正在尝试按字段过滤项目购买时出现错误。

<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

Answer 1

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

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

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

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