[英]using ng-repeat to populate table rows with data from array
I have a JS function called current_item.get_user_history()
that returns an array , by making and API call, that looks something along the lines of this: 我有一个称为current_item.get_user_history()
的JS函数,该函数通过进行调用和API调用返回一个数组,其外观与此类似:
things[0]:
thing_id: 5
user_id: 23
paddle_no: 1234
item_id: 893
price: 5000
things[1]:
thing_id: 4
user_id: 67
paddle_no: 6743
item_id: 893
price: 4500
... and so on
I want to be able to take data from this array to populate a table using an ng-repeat. 我希望能够从该数组中获取数据以使用ng-repeat填充表。
<div class="bid_history">
<table>
<tr>
<th>
Column 1
</th>
<th>
Column 2
</th>
<th>
Column 3
</th>
</tr>
<tr ng-repeat="thing in current_item.get_user_history() track by thing.id">
{{thing.user_id}} {{thing.price}}
</tr>
</table>
</div>
For some reason nothing gets rendered, and it seems to do a lot of repeating because I get an unstoppable number of errors in the chrome console. 出于某种原因,什么都没有渲染,并且似乎做了很多重复,因为在chrome控制台中出现了无法阻止的错误。 Any help is appreciated to explain exactly how one uses ng-repeat
. 感谢您提供任何帮助,以准确解释人们如何使用ng-repeat
。
You cannot use a function that triggers $digest()
(like $http
, $timeout
) in ng-repeat
. 您不能在ng-repeat
使用触发$digest()
的函数(如$http
, $timeout
)。 It causes infinite $digest()
loop. 这会导致无限的$digest()
循环。
There are explanations: 有以下解释:
https://github.com/angular/angular.js/issues/705 or angular Infinite $digest Loop in ng-repeat . https://github.com/angular/angular.js/issues/705或ng-repeat中的angular Infinite $ digest循环 。
And I made the same mistake before :) 我之前犯了同样的错误:)
Infinite loop when ng-repeat/ng-class calls a function which calls $http ng-repeat / ng-class调用一个调用$ http的函数时出现无限循环
You have to save current_item.get_user_history()
data first and then use ng-repeat
to call the data. 您必须先保存current_item.get_user_history()
数据,然后使用ng-repeat
调用数据。
scope.things= urrent_item.get_user_history();
<tr ng-repeat="thing in things track by thing.id">
Short Answer Don't call a function on ngRepeat
for return items. 简短答案不要在ngRepeat
上调用函数来返回项目。 Store the item array on a property in the scope. 将项目数组存储在合并范围内的属性上。
$scope.user_history = current_item.get_user_history();
If in fact you really need to do this you can fix it with one of the following: 如果实际上您确实需要执行此操作,则可以使用以下方法之一对其进行修复:
current_item.get_user_history()
call. 不要在每个current_item.get_user_history()
调用上创建新对象。 hashKey
method for them. 如果需要创建新对象,则可以hashKey
添加hashKey
方法。 See this topic for examples. 有关示例,请参见本主题 。 Medium Answer You generally do not want to iterate over a function in ng-repeat. 中等答案通常,您不想迭代ng-repeat中的函数。 The reason is that current_item.get_user_history()
returns an array with new object. 原因是current_item.get_user_history()
返回带有新对象的数组。 This object does not have a hashKey
and does not exist in ngRepeat
cache. 该对象没有hashKey
,并且在ngRepeat
缓存中不存在。 So ngRepeat
on each watch.get
generates new scope for it with new watch for {{thing.id}}
. 因此,每个ngRepeat
上的watch.get
都会使用{{thing.id}}
新手表watch.get
生成新的作用域。 This watch on first watch.get()
has watch.last == initWatchVal
. 第一个watch.get()
上的手表具有watch.last == initWatchVal
。 So then watch.get() != watch.last
. 因此,然后watch.get() != watch.last
。 So then $digest
starts a new traverse. 因此, $digest
开始新的遍历。 Then ngRepeat
creates a new scope with a new watch and so on. 然后, ngRepeat
使用新手表创建新作用域,依此类推。 Then after 10 traverses you will get an error. 然后经过10次遍历后,您将得到一个错误。
Long Answer Check out this post for a very well done explanation of how this works. 长答案请查看这篇文章 ,以很好地解释其工作原理。
The problem was that digest cycle was returning a promise and I had to turn it into an object instead. 问题在于摘要周期正在返回一个承诺,而我不得不将其变成一个对象。
I was originally doing this: 我最初是这样做的:
my_api.get_user_history(self.id);
and had to add this to that line: 并将其添加到该行:
.then(function(data){self.user_history = data});
Part of the problem was also what @Ealon mentioned as well. 问题的一部分也是@Ealon提到的。 I also decided to store it in a local variable instead of having the result of a function returned. 我还决定将其存储在局部变量中,而不是返回函数的结果。 I posted this answer because each of the above answer were all valid pieces that I needed to consider and put together to fix my problem. 我发布此答案是因为上述每个答案都是我需要考虑并组合在一起以解决问题的所有有效部分。 Thank you all for your help and guidance. 谢谢大家的帮助和指导。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.