Angular ng-repeat - 动态创建集合

Question

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

我用这个例子将问题简化为最小化

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

这是它在Plunkr中的工作副本(View显示正确的结果,但在控制台中你会看到上面提到的错误.更复杂的例子完全失败)

如果它可能有任何区别,则认为[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太多次.

有关绑定一次功能的更多信息,请检查此一次性绑定

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

<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表示升序排序.

您还可以查看此问题和答案以获取更多信息: 反向角度ng-repeat