Infinite $ digest在ng-repeat内有一个ng样式,它调用一个使用Math的函数
我试图动态设置我的标签的背景颜色。我是如何实现即用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"}} ... ]]
您不能在视图中的函数,每次都返回不同的值。
每个摘要循环,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>
这解决了这个问题。谢啦!很好的帮助。文档确实说过,但从未点击过,我也是这样做的。 * facepalm * – fab
直到你理解消化循环如何工作 – charlietfl