如何循环项目通过NG-重复函数返回？ [英] How to Loop through items returned by a function with ng-repeat?
问题描述
我要重复创建的div，项目是由函数返回的对象。而下面的code报告错误：
10 $摘要（）迭代到达。中止！的jsfiddle是在这里： http://jsfiddle.net/BraveOstrich/awnqm/
＆LT;机身NG-应用＆GT;
＆LT; DIV NG重复=实体getEntities（）＆GT;
您好{{entity.id}}！
＆LT; / DIV＆GT;
＆LT; /身体GT;
简短的回答：你真的需要这样的功能，或者您可以使用属性？ http://jsfiddle.net/awnqm/1/
龙答案
为了简单起见，我将只描述你的情况 - ngRepet为对象的数组。另外，我会忽略一些细节。
AngularJS使用脏检查检测的变化。当应用程序启动运行 $消化 $ rootScope 。 $消化将做范围的层次深度优先遍历。所有示波器都有手表的名单。每一款手表都有一个值（最初 initWatchVal ）。对于每一个作用域 $消化运行它所有的手表，得到的电流值（ watch.get（范围））和比较它 watch.last 。如果电流值不等于 watch.last （总是先比较） $消化设置脏到真正。当所有的作用域，如果脏==真 $消化开始从另一个深度优先遍历 $消化当脏==虚假或遍历== 10.在后一种情况下数，错误10 $摘要（）迭代达到。结束将会被记录。
现在关于 ngRepeat 。对于每个 watch.get 叫它存储从集合对象（返回的值 getEntities ）的缓存与aditional的信息（<一个href=\"https://github.com/angular/angular.js/blob/f2b7fffdc0b0ad80cebb24f5fea743e9e4a439d5/src/apis.js#L73\"><$c$c>HashQueueMap通过 hashKey ）。对于每一个 watch.get 通话 ngRepeat 尝试按 hashKey 从缓存中。如果它不存在缓存， ngRepeat 将其存储在缓存中，创造了新的范围，把对象就可以了，创建DOM元素，<一个href=\"https://github.com/angular/angular.js/blob/1d388676e3b97b6171fc498e82545bd437ee6fd1/src/ng/directive/ngRepeat.js#L148\">etc.
现在关于<一个href=\"https://github.com/angular/angular.js/blob/f2b7fffdc0b0ad80cebb24f5fea743e9e4a439d5/src/apis.js#L16\"><$c$c>hashKey.通常 hashKey 是<生成的唯一编号href=\"https://github.com/angular/angular.js/blob/5c95b8cccc0d72f7ca3afb1162b9528c1222eb3c/src/Angular.js#L156\"><$c$c>nextUid().但它可以是<一个href=\"https://github.com/angular/angular.js/blob/f2b7fffdc0b0ad80cebb24f5fea743e9e4a439d5/src/apis.js#L21\">function. hashKey 存储对象为未来的使用后。
为什么你的榜样产生误差：函数 getEntities（）总是返回新的对象数组。这个对象没有 hashKey 和 ngRepeat 缓存不存在。因此， ngRepeat 每个 watch.get 产生了新的手表为它新的余地 {{ entity.id}} 。这款腕表首次 watch.get 的 watch.last == initWatchVal 。因此， watch.get（）！= watch.last 。因此， $摘要开始新的导线。因此， ngRepeat 创建了新的手表新范围。所以...... 10后穿越你的错误。
如何修复它
- 请不要在每个
getEntities创建新的对象（）电话。 - 如果你需要创建你可以添加
hashKey方法，为他们的新对象。请参见这个话题的例子。
希望的人，谁知道AngularJS内部纠正我，如果我错了的东西。
I want to create divs repeatedly, the items is objects returned by a function. However the following code report errors: 10 $digest() iterations reached. Aborting! jsfiddle is here: http://jsfiddle.net/BraveOstrich/awnqm/
<body ng-app>
<div ng-repeat="entity in getEntities()">
Hello {{entity.id}}!
</div>
</body>
Short answer: do you really need such function or you can use property? http://jsfiddle.net/awnqm/1/
Long answer
For simplicity I will describe only your case - ngRepet for array of objects. Also, I'll omit some details.
AngularJS uses dirty checking for detecting changes. When application is started it runs $digest for $rootScope. $digest will do depth-first traversal for scope's hierarchy. All scopes have list of watches. Each watch has last value (initially initWatchVal). For each scope for all watches $digest runs it, gets current value (watch.get(scope)) and compares it to watch.last. If current value not equal to watch.last (always for first compare) $digest set dirty to true. When all scopes are processed if dirty == true $digest starts another depth-first traversal from $rootScope. $digest ends when dirty == false or number of traversals == 10. In the latter case, the error "10 $digest() iterations reached." will be logged.
Now about ngRepeat. For each watch.get call it stores objects from collection (returning value of getEntities) with aditional information in cache (HashQueueMap by hashKey). For every watch.get call ngRepeat try to get object by its hashKey from cache. If it does not exist in cache, ngRepeat stores it in cache, creates new scope, puts object on it, creates DOM element, etc.
Now about hashKey. Usually hashKey is unique number generated by nextUid(). But it can be function. hashKey is stored in object after generating for future use.
Why your example generates error: function getEntities() always returns array with new object. This object doesn't have hashKey and doesn't exist in ngRepeat cache. So ngRepeat on each watch.get generates new scope for it with new watch for {{entity.id}}. This watch on first watch.get has watch.last == initWatchVal. So watch.get() != watch.last. So $digest starts new traverse. So ngRepeat creates new scope with new watch. So ... after 10 traverses you get error.
How you can fix it
- Do not create new objects on every
getEntities()call. - If you need create new objects you can add
hashKeymethod for them. See this topic for examples.
Hope people who know AngularJS internals correct me if I'm wrong in something.
这篇关于如何循环项目通过NG-重复函数返回？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
