【问题标题】：Custom filter overrides original data or causes infinite $digest loop自定义过滤器覆盖原始数据或导致无限 $digest 循环
【发布时间】：2014-04-01 09:04:03
【问题描述】：

初始情况

TL;DR
我想使用自定义 AngularJS 过滤器过滤嵌套数组。不幸的是，不仅过滤了 ng-repeat 的数据，还过滤了 $scope 的原始对象。

我有一个小的 demo 供你参考：http://jsfiddle.net/7XRB2/
例如。搜索Test，列表会越来越短。删除你的搜索，你会看到会发生什么：什么都没有。过滤器不过滤列表，他过滤原始数据！

这是我的过滤器：

app.filter('searchFilter', function() {
  return function(areas, searchTerm) {
    if (!angular.isUndefined(areas)
      && !angular.isUndefined(searchTerm)) {

      var searchExp;
      searchExp = new RegExp(searchTerm, 'gi');

      var tmpAreas = [];
      angular.forEach(areas, function(area) {
        var tmpTopics = [];
        angular.forEach(area.topics, function(topic) {
          var tmpVideos = [];
          angular.forEach(topic.videos, function(video) {
            if (video.title.match(searchExp)) {
              tmpVideos.push(video);
            }
          });
          topic.videos = tmpVideos;
          if (topic.videos.length > 0 || topic.title.match(searchExp)) {
            tmpTopics.push(topic);
          }
        });
        area.topics = tmpTopics;
        if (area.topics.length > 0) {
          tmpAreas.push(area);
        }
      });
      return tmpAreas;
    }
    else {
      return areas;
    }
  }
});

我已经实现了另一个自定义搜索过滤器，效果很好并且没有这个问题：

app.filter('mainNavigationFilter', function () {
  return function (elements, selectedElement) {
    if (!angular.isUndefined(elements) && !angular.isUndefined(selectedElement) && selectedElement.length > 0) {
      var tempElements = [];
      angular.forEach(selectedElement, function (id) {
        angular.forEach(elements, function (element) {
          if(angular.equals(element.id, id)
            tempElements.push(element);
          }
        });
      });
      return tempElements;
    }
    else {
      elements
    }
  }
});

我认为是什么问题

我在过滤器中使用topic.videos = tmpVideos; 和area.topics = tmpTopics;。我想，由于 javascripts 对象引用，这些新分配被继承到原始对象 - 我的范围对象。

经过一番研究，我找到了angular.copy()，并在我的过滤器中添加了以下块：

var cpAreas;
cpAreas = angular.copy(areas);

另外我把第一个angular.forEach改成了

angular.foreach(cpAreas, function(area) {[...]});

这是一个更新的小提琴：http://jsfiddle.net/dTA9k/

无限 $digest 循环

伊皮！过滤器按预期工作 - 除非您打开控制台 ...
现在过滤器导致了一个新问题：

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [...]

我在 SO 上发现了一些关于这个错误的问题，看起来它被抛出了，因为过滤器每次都返回一个新对象，因为 angular.copy。

有什么办法可以解决这个问题吗？

【问题讨论】：

您的第二个示例似乎不起作用（使用 chrome）。

标签： javascript angularjs angularjs-scope angularjs-ng-repeat

【解决方案1】：

尝试使用自定义 ng-repeat。

所以我尝试了您的代码并改用 $index。对于 topic.title 和 video.title，我不知道。尝试自定义 ng-repeat。

<div ng-app="videoList">
    <input ng-model='search' />
    <ul ng-controller='AreasController' class="video-list-areas">
        <li ng-repeat='area in filtered = (subject.areas | searchFilter:search)'>
            {{subject.areas[$index].title}}
            <ul>
                <li ng-repeat='topic in area.topics'>
                    <ul>
                        <li ng-repeat='video in topic.videos'>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

您的过滤器有效，我尝试在您的 HTML 中使用它：

<div ng-app="videoList">
    <input ng-model='search' />
    <ul ng-controller='AreasController' class="video-list-areas">

        {{subject.areas | searchFilter:search}}


    </ul>
</div>

【讨论】：