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
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>
Angular will do calculation and automatic showing in template on data change for you. But by putting ng-repeat='item in getGroupedRange() you put this into endles cycle recalculation.
Try to avoid this by assigning the value of the items (that may be changed by $scope.getGroupedRange function in any way) in the list to some scope variable, say $scope.range, that will be iterated in ng-repeat.
in controller
$scope.getGroupedRange = function() { $scope.range = [ { val: 1, abs: 1, rel: 1, cum: 1, id: 123456 } ]; };
in template
<div ng-repeat='item in range track by item.id'> <span>{{item.val}}</span> <span>{{item.abs}}</span> <span>{{item.rel}}</span> <span>{{item.cum}}</span> </div>
Found the solution:
$scope.prev = null; $scope.getGroupedRange = function() { var data = [{ val: 1, abs: 1, rel: 1, cum: 1, id: 123456 }]; if (angular.equals($scope.prev, data)) { return $scope.prev; } $scope.prev = data; return data; };
