javascript - Angular ng-repeat - 动态创建集合

当尝试对动态创建的集合进行 ng-repeat 时会出现问题:Angular 将进入循环，达到 10 $digest() 迭代。中止! 错误

我已经通过这个例子将问题简化到最低限度

<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 ( View 显示正确的结果，但在控制台中你会看到上面提到的错误。更复杂的例子完全失败)

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

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

谢谢

最佳答案

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

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

在 a 前加上::告诉 AngularJS 这个数组或这个变量不会被改变，所以它会从中释放 $watch 函数并且不会消耗 $digest 太多次。

有关一次绑定(bind)功能的更多信息，请查看此 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

关于javascript - Angular ng-repeat - 动态创建集合，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27721347/