自定义过滤器会覆盖原始数据或导致无限$ digest循环

Question

初始状况

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

我有一个小的演示作为你的小提琴：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循环

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

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

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

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

Answer 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>