Javascript Angular ng repeat-动态创建集合_Javascript_Angularjs_Angularjs Ng Repeat

Javascript Angular ng repeat-动态创建集合

javascript angularjs

Javascript Angular ng repeat-动态创建集合,javascript,angularjs,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Ng Repeat,当尝试在动态创建的集合上重复ng时会出现问题：Angular将进入循环，并达到10$digest（）次迭代。流产错误我用这个例子把问题简化到最低限度 <body ng-init='a = [1, 2, 3]'> <div ng-repeat="item in a.reverse()">{{item}}</div> </body> {{item}} （视图显示正确的结果，但在控制台中您将看到上述错误。更复杂的示例完全失败）考虑到[1

当尝试在动态创建的集合上重复ng时会出现问题：Angular将进入循环，并达到

10$digest（）次迭代。流产错误
我用这个例子把问题简化到最低限度
<body ng-init='a = [1, 2, 3]'>
    <div ng-repeat="item in a.reverse()">{{item}}</div>
</body>


{{item}}

（视图显示正确的结果，但在控制台中您将看到上述错误。更复杂的示例完全失败）
考虑到[1,2,3]可能是对象数组，如果它可能有任何区别的话
所以问题是为什么会这样，有没有一个简单的方法来解决这个问题
谢谢
这是因为您在ng repeat中调用了reverse（）函数
像这样，它工作没有错误
<body ng-init='a = [1, 2, 3].reverse()'>
   <div ng-repeat="item in a">{{item}}</div> 
</body>


{{item}}
之所以会发生这种情况，是因为angular使用定点模型渲染页面中的对象。在应用一次迭代后，如果对象的所有“摘要”都没有更改，则认为模型是稳定的，并在视图中进行渲染。如果x=10次迭代后模型不稳定，则会产生错误。在您的例子中，函数reverse（）总是生成一个具有不同摘要的新模型对象
对于您的特定问题，可以将ng repeat与orderBy子句一起使用（假设模型对象是数组）
一般来说，当您有一个主模型和许多派生子模型时，最好以“反应式”方式使用$watch表达式派生子模型。使用函数进行ng repeat不是首选方法，在使用函数进行ng repeat项时必须小心。
请检查这篇文章
问题在于，您在ng repeat中调用了reverse函数，$apply和$digest被多次调用。如果您使用的是AngularJS 1.3.x，并且您的数据将创建一次并且在运行时不会更改，那么您可以通过在任何ng-（指令）中键入以下命令来使用bind once属性
在HTML中键入以下代码行：
<body ng-init='a = [1, 2, 3]'>
  <div ng-repeat="item in a | reverse">{{item}}</div>
</body>


{{item}}

对于对象数组的排序，通常应使用以下命令：
<body ng-init='a = [{id: 1}, {id: 2}, {id: 3}]'>
  <div ng-repeat="item in a | orderBy:'id':true">{{item.id}}</div>
</body>


{{item.id}

使用true进行反向排序，使用false进行升序排序
您还可以查看此问题和答案以了解更多信息：
如我所说，这是一个简化的示例，在ng repeat内部创建新的集合是一个关键部分。例如，在我真正的问题中，除了集合并将其还原为新集合之外，还有一个函数需要给我们提供一个更好的示例进行分析。请看一下此链接。当前示例由于转换而中断。我选择显示问题，.reverse（）正在更改数组本身。Var a正在跟踪，.reverse（）正在更改它，$digest正在运行，.reverse（）正在运行，并且继续运行。这个例子需要有点复杂，并强调其他细节，所以我会提出不同的问题。谢谢大家，很抱歉没有解决这个问题
app.filter('reverse', function() {
  return function(items) {
    return items.slice().reverse();
  };
});

<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>