Infinite $digest Loop when within an ng-repeat there's an ng-style that calls a function that uses Math

Question

I am trying to dynamically set the background colors of my labels. How I implemented that is to use ng-style like so:

function getColor() {
  return ('#' + Math.floor(Math.random() * 16777215).toString(16));
}

<span ng-repeat='interest in ctrl.profile.interests'      
     class='label interest'
     ng-style="{'background-color': ctrl.getColor()}"> 
     {{ interest }}
</span>

However, whenever I use Math inside getColor, I would get the infinite digest loop error below. Would you have workaround to this problem or a different solution on setting background-color dynamically? Thanks!

10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [ [{"msg":"{'background-color': ctrl.getColor(interest)}","newVal":{"background-color":"#3bf02a"},"oldVal":{"background-color":"#fa8432"}},{"msg":"{'background-color': ctrl.getColor(interest)}","newVal":{"background-color":"#c0a641"},"oldVal":{"background-color":"#bf3c51"}},{"msg":"{'background-color': ctrl.getColor(interest)}","newVal":{"background-color":"#42fa1b"},"oldVal":{"background-color":"#a35769"}},{"msg":"{'background-color': ctrl.getColor(interest)}","newVal":{"background-color":"#d18783"},"oldVal":{"background-color":"#f35b4"}},{"msg":"{'background-color': ctrl.getColor(interest)}","newVal":{"background-color":"#9a0847"},"oldVal":{"background-color":"#ddd27b"}} ], [{"msg":"{'background-color': ctrl.getColor(interest)}","newVal":{"background-color":"#cb0e35"},"oldVal":{"background-color":"#3bf02a"}} ... ]]

charlietfl · Accepted Answer · 2017-07-22T14:13:11.937

1

You can't have a function in view that returns a different value every time.

Every digest cycle, Angular does multiple digests until the scope values are stable (the same as last digest). If values in that scope never stabilize you end up with infinite digests and the default limit is 10 before angular aborts.

I would suggest building an array of random colors in controller first and use $index in ng-repeat to get each value:

this.randomColors = this.profile.interests.map(function(){
    return ('#' + Math.floor(Math.random() * 16777215).toString(16)); 
});

Then in view:

<span ng-repeat='interest in ctrl.profile.interests'      
     class='label interest'
     ng-style="{'background-color': ctrl.randomColors[$index]}"> 
     {{ interest }}
</span>

edited Jul 22 '17 at 14:13

answered Jul 22 '17 at 14:01

charlietfl

170,828
13
121
150

That solved the problem. Thanks man! Great help. The documentation did say that, but it never clicked that I was doing the same. * facepalm * – fab Jul 22 '17 at 22:02
Easy to not realize it until you understand how digest cycles work – charlietfl Jul 22 '17 at 22:13

Infinite $digest Loop when within an ng-repeat there's an ng-style that calls a function that uses Math

1 Answers1