Question

尝试对动态创建的集合进行ng-repeat时会出现问题：Angular将以10 $digest() iterations reached. Aborting!错误进行循环

我已使用此示例将问题简化为最小

<body ng-init='a = [1, 2, 3]'>
    <div ng-repeat="item in a.reverse()">{{item}}</div>
</body>

and here is it working copy in Plunkr（视图显示正确的结果，但在控制台中您会看到上面提到的错误。更复杂的示例完全失败）

考虑 [1,2,3] 可能是对象数组，如果它可能有任何区别

所以问题是为什么会这样，是否有一种简单的方法来解决这个问题？

由于

Answer 1

问题是你在ng-repeat中调用了反向函数，并且$ apply和$ digest多次调用。如果您正在使用AngularJS 1.3.x并且您的数据将被创建一次并且在运行时不会更改，则可以通过在任何ng-（指令）中键入以下内容来使用bind-once属性

<body ng-init='a = [1, 2, 3].reverse()'>
   <div ng-repeat="item in ::a">{{item}}</div> 
</body>

使用with ::前缀告诉AngularJS这个数组或这个变量不会被更改，因此它将从中释放$ watch函数并且不会消耗$ digest多次。

有关一次绑定功能的详细信息，请查看此one-time-binding

对于逆转技术本身，如果它是动态创建并经常更改的，您可以使用以下方法之一：

<body ng-init='a = [1, 2, 3]'>
  <div ng-repeat="item in a.slice().reverse()">{{item}}</div>
</body>

或者您也可以将其包装到过滤器中，您可以按如下方式使用它：

app.filter('reverse', function() {
  return function(items) {
    return items.slice().reverse();
  };
});

并在HTML中输入以下代码行：

<body ng-init='a = [1, 2, 3]'>
  <div ng-repeat="item in a | reverse">{{item}}</div>
</body>

一般来说，为了排序对象数组，你应该使用以下内容：

<body ng-init='a = [{id: 1}, {id: 2}, {id: 3}]'>
  <div ng-repeat="item in a | orderBy:'id':true">{{item.id}}</div>
</body>

使用true表示反向排序，使用false表示升序。

您还可以查看此问题和答案以获取更多信息： angular ng-repeat in reverse

Answer 2

这是因为你在ng-repeat中调用了reverse（）函数。

像这样可以正常运行

<body ng-init='a = [1, 2, 3].reverse()'>
   <div ng-repeat="item in a">{{item}}</div> 
</body>

Answer 3

这是因为angular使用定点模型来渲染页面中的对象。在应用一次迭代后，所有＆＃34;摘要＆＃34;如果对象没有改变，则模型被认为是稳定的并且在视图中呈现。如果在x = 10次迭代后模型不稳定，则会引发错误。在您的情况下，函数reverse（）始终生成具有不同摘要的新模型对象。

对于您的特定问题，您可以将ng-repeat与orderBy子句一起使用（假设模型对象是一个数组）。

通常，当您拥有主模型和许多派生子模型时，最好使用$表格中的$ watch表达式派生子模型。方式。

Answer 4

使用ng-repeat功能不是首选方法，在使用ng-repeat项目时必须小心。请查看这篇文章。