Infinite $ digest Boucle lorsque dans ng-repeat il y a un style ng qui appelle une fonction qui utilise Math

Question

J'essaie de définir dynamiquement les couleurs d'arrière-plan de mes étiquettes. Comment puis-je mis en œuvre qui est d'utiliser de style ng comme ceci:

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>

Cependant, chaque fois que je l'utilise Math intérieur getColor, je recevrais l'erreur de boucle infinie digest ci-dessous. Auriez-vous une solution de contournement à ce problème ou une solution différente sur la définition dynamique de couleur de fond? Merci!

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

Vous ne pouvez pas avoir une fonction vue qui retourne une valeur différente à chaque fois.

Chaque cycle de digestion, Angular effectue plusieurs digestions jusqu'à ce que les valeurs de la portée soient stables (la même que la dernière digestion). Si les valeurs de cette portée ne se stabilisent jamais, vous obtenez des résumés infinis et la limite par défaut est 10 avant les abandons angulaires.

je suggère la construction d'un tableau de couleurs aléatoires dans le contrôleur d'abord et utiliser $index dans ng-repeat pour obtenir chaque valeur:

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

Ensuite, en vue:

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