Infinite $ Digest Schleife, wenn innerhalb einer ng-Wiederholung gibt es eine ng-style, die eine Funktion, die Math verwendet

Question

Ich versuche, die Hintergrundfarben meiner Etiketten dynamisch festlegen. Wie ich ausgeführt, dass ist wie so ng-Stil zu verwenden:

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>

Jedes Mal, wenn ich Mathe innerhalb getColor verwenden, würde ich die Endlosschleife Fehler unten verdauen bekommen. Hätten Sie eine Lösung für dieses Problem oder eine andere Lösung, wenn Sie Hintergrundfarbe dynamisch einstellen möchten? Vielen Dank!

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"}} ... ]]

Answer 1

Sie können keine Funktion im Auge haben, die jedes Mal einen anderen Wert zurückgibt.

Jeder Digest-Zyklus, Angular führt mehrere Digests durch, bis die Scope-Werte stabil sind (das gleiche wie beim letzten Digest). Wenn Werte in diesem Bereich sich nie stabilisieren, erhalten Sie endlose Digests und das Standardlimit ist vor Winkelabbrüchen 10.

Ich würde vorschlagen, eine Reihe von zufälligen Farben in der Steuerung Aufbau und ersten $index in ng-repeat verwenden, um jeden Wert zu erhalten:

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

Dann im Blick:

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