角度错误：达到 10 次 $digest() 迭代答案

【问题标题】：Angular error: 10 $digest() iterations reached角度错误：达到 10 次 $digest() 迭代
【发布时间】：2016-02-25 21:44:04
【问题描述】：

我正在尝试做一个过滤器，它将按确定的字段对我的收藏项进行分组（例如 angular-filter 库中的 groupBy 过滤器）

app.filter('groupBySortedField', function() {
  return function(collection, property) {
    var result = {};

    angular.forEach(collection, function(item) {
      var prop = item[property];

      if (!result[prop]) {
        result[prop] = [];
      }

      result[prop].push(item);
    });

    return result;
  };
});

效果很好，但是我在控制台中遇到了很多错误：

未捕获的错误：[$rootScope:infdig] 已达到 10 次 $digest() 迭代。

查看打开控制台http://plnkr.co/edit/HFlB7VTMCe2GnM3SUirs?p=preview的示例

如何解决？

【问题讨论】：

见*.com/questions/16507040/…或*.com/questions/22638089/…
...您想要的解决方案是github.com/a8m/angular-filter#groupby，它通过记忆以前的返回值来避免无限摘要循环
@DanielBeck 谢谢！ angular-filter 不能满足我的要求，我需要稍微修改一下，但是 _.memoize 就像一个魅力！请留下答案，我会接受的！

标签： javascript angularjs angular-filters

【解决方案1】：

我完全同意丹尼尔给出的答案。

为了更好地理解，我想在这里展示一个简单的解决方案，如果可以在任何绑定和观察者处于活动状态之前进行排序。

// Code goes here

var app = angular.module('test', []);

app.controller('TestCtrl', ['$scope', function($scope) {
  var events = [{
      startDate: new Date('Tue Nov 24 2015 03:05:00'),
      name: '111'
    }, 
    {
      startDate: new Date('Tue Nov 24 2015 03:05:00'),
      name: '222'
    },
    {
      startDate: new Date('Tue Nov 24 2015 04:05:00'),
      name: '333'
    },
    {
      startDate: new Date('Tue Nov 24 2015 04:05:00'),
      name: '444'
    }
  ];

  $scope.orderedEvents = getEvents(events,'startDate');
  
  function getEvents (collection,property) {
    var result = {};
    angular.forEach(collection, function(item) {
      var prop = item[property];

      if (!result[prop]) {
        result[prop] = [];
      }

      result[prop].push(item);
    });

    return result;
    
  }
}]);

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@*" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="test" ng-controller="TestCtrl">
  <ul ng-repeat="(startDate, eventsList) in orderedEvents">
    <li>{{eventsList[0].startDate}}</li>
    <li ng-repeat="event in eventsList">{{event.name}}</li>
  </ul>
  
</body>

</html>

demo

【讨论】：