angular Infinite $digest Loop in ng-repeat

Question

I want to call function in ng-repeat attribute, here is my code

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

Possible duplicate of [How to Loop through items returned by a function with ng-repeat?](http://stackoverflow.com/questions/12336897/how-to-loop-through-items-returned-by-a-function-with-ng-repeat) — Tristan, Nov 21 '15 at 19:03
I believe that hashKey and track by are both related to how DOM rendering is handled (or not handled) for items in the repeat. The infinite digest issue is due to ngRepeat using $watchCollection internally which will pickup on the new object in your new array. — bingles, Jan 21 '16 at 14:12

dfsq · Answer 1 · 2015-11-21T19:07:33.993

7

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>

edited Nov 21 '15 at 19:07

answered Nov 21 '15 at 19:04

dfsq

191,768
25
236
258

so using ```track by``` doesn't make sense? – Alexey Sh. Nov 21 '15 at 19:06
Why, `track by` solves other problem it's not related to this one. – dfsq Nov 21 '15 at 19:08
Sure I mean only my case. – Alexey Sh. Nov 21 '15 at 19:08
how ng detemine that ```getGroupedRange``` returns new value? – Alexey Sh. Nov 21 '15 at 19:11
It compares previos value (from the previous check) with new one. `getGroupedRange()` returns new array every time. – dfsq Nov 21 '15 at 19:28
the comparison goes like this ```==``` ? – Alexey Sh. Nov 21 '15 at 19:30
It uses strict `===`. But in any case `getGroupedRange() !== getGroupedRange()`. – dfsq Nov 21 '15 at 19:35

score 0 · Answer 2 · answered Nov 21 '15 at 19:01

0

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>

answered Nov 21 '15 at 19:01

shershen

9,875
11
39
60

When I should call the getGroupedRange function? I don't want paste ```getGroupedRange()``` in each place... thx – Alexey Sh. Nov 21 '15 at 19:05
you call it when you need, – shershen Nov 21 '15 at 19:06
I don't want to repeat myself. – Alexey Sh. Nov 21 '15 at 19:07
you only need track by if you have similar items in the array. it doesn't infulence the other part that we are solving here. – shershen Nov 21 '15 at 19:08

score 0 · Accepted Answer · answered Nov 21 '15 at 19:16

0

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

answered Nov 21 '15 at 19:16

Alexey Sh.

1,734
2
22
34

1

The discussion here was to explain you that using function in ng-repeat is a bad practice. But yes, you can always find a way shoot in your leg in angular world – shershen Nov 21 '15 at 19:19
@shershen Why do you think that using function in ng-repeat is a bad practice? – Alexey Sh. Nov 27 '15 at 16:20
2

@shershen I do not think using ng-repeat on a function is bad practice at all. On the contrary, it's well aligned with functional programming. On the other hand, the discussion here shows how badly angular plays with FP. – Petkovsky Jul 06 '16 at 11:51
how is mutating a member and returning it later functional? haha – Jay Jul 06 '18 at 01:10

score 0 · Answer 4 · answered Nov 01 '21 at 05:39

Try doing something like this:

<body ng-controller="mainCtrl">
    <div ng-init="grpRange = getGroupedRange()">
        <div ng-repeat='item in grpRange track by item.id'>
            <span>{{item.val}}</span>
            <span>{{item.abs}}</span>
            <span>{{item.rel}}</span>
            <span>{{item.cum}}</span>
        </div>
    </div>
</body>

angular Infinite $digest Loop in ng-repeat

4 Answers4

Linked