角度 ng 重复 - 动态创建集合

Angular ng-repeat - creating collection dynamically

本文关键字：创建 集合 动态 ng 重复 角度      更新时间：2023-09-26

尝试对动态创建的集合进行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 中的工作副本（视图显示正确的结果，但在控制台中您将看到上述错误。更复杂的例子完全失败）

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

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

谢谢

问题是你在 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>

前缀 ：： 告诉 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 重复

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

像这样它没有错误地工作

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

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

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

通常，当您有一个主模型和许多派生的子模型时，最好以"响应式"方式使用$watch表达式派生子模型。

将函数用于 ng-repeat 不是一种首选方法，在对 ng-repeat 项目使用函数时必须小心。请查看此帖子。

如何循环使用ng-repeat的函数返回的项目？

相关文章：