无限 $digest 循环在 ng-repeat 中有一个 ng-style 调用一个使用 Math 的函数

Question

我正在尝试动态设置标签的背景颜色。我是如何实现的，就是像这样使用 ng-style:

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 中使用 Math 时，都会出现下面的无限摘要循环错误。您是否有解决此问题的方法或动态设置背景颜色的不同解决方案？谢谢！

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

你不能有一个函数，因为 returns 每次都有不同的值。

每个摘要周期，Angular 都会进行多次摘要，直到范围值稳定（与上一个摘要相同）。如果该范围内的值永远不会稳定，您最终会得到无限的摘要，并且在 angular 中止之前默认限制为 10。

我建议先在控制器中构建一个随机颜色数组，然后在 ng-repeat 中使用 $index 来获取每个值：

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>

无限 $digest 循环在 ng-repeat 中有一个 ng-style 调用一个使用 Math 的函数

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

angularjs

angularjs-ng-repeat

angularjs-digest

ng-style