Menu
I want to call function in ng-repeat attribute, here is my code
example plnkr
html
<body ng-controller="mainCtrl">
<div ng-repeat='item in getGroupedRange() track by item.id'>
<span>{{item.val}}</span>
<span>{{item.abs}}</span>
<span>{{item.rel}}</span>
<span>{{item.cum}}</span>
</div>
</body>
js
$scope.getGroupedRange = function() {
return [
{
val: 1,
abs: 1,
rel: 1,
cum: 1,
id: 123456
}
];
};
When I opened console I noticed the error
10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"fn: function (c,d,e,f){e=a(c,d,e,f);return b(e,c,d)}","newVal":9,"oldVal":8}],[{"msg":"fn: function (c,d,e,f){e=a(c,d,e,f);return b(e,c,d)}","newVal":10,"oldVal":9}],[{"msg":"fn: function (c,d,e,f){e=a(c,d,e,f);return b(e,c,d)}","newVal":11,"oldVal":10}],[{"msg":"fn: function (c,d,e,f){e=a(c,d,e,f);return b(e,c,d)}","newVal":12,"oldVal":11}],[{"msg":"fn: function (c,d,e,f){e=a(c,d,e,f);return b(e,c,d)}","newVal":13,"oldVal":12}]]
The main goal of my code is using function in ng-repeat for calculating data in each event loop
582
No, you can't use function in ngRepeat like this. The problem is that Angular uses strict comparison of objects in digest loop to determine if the value of the property changed since the last check. So what happens is that getGroupedRange returns new value (new array) each time it's called. Angular has no idea and considers this value as unstable and thus continues checking. But it aborts after 10 checks.
You need to construct necessary array and assign it to scope property, so it will not change during digest loop:
$scope.groupedRange = $scope.getGroupedRange();
then use it like in ngRepeat
<div ng-repeat='item in groupedRange track by item.id'>
<span>{{item.val}}</span>
<span>{{item.abs}}</span>
<span>{{item.rel}}</span>
<span>{{item.cum}}</span>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
