Infinite $ digest在ng-repeat内有一个ng样式，它调用一个使用Math的函数

Question

我试图动态设置我的标签的背景颜色。我是如何实现即用NG-风格像这样：

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>

但是，每当我用数学里面的getColor，我会得到无限下方消化循环错误。你有解决这个问题或不同的解决方案动态设置背景颜色？谢谢！

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

您不能在视图中的函数，每次都返回不同的值。

每个摘要循环，Angular会在范围值稳定之前进行多个摘要（与上一个摘要相同）。如果该范围内的值永远不会稳定，那么最终会得到无限的摘要，并且在角度中止之前默认限制为10。

我建议首先构建的随机颜色的阵列控制器和使用$index在ng-repeat让每个值：鉴于

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

然后：

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