带生成随机字符串的函数调用的ng-class

Question

我正在为我的Angular应用程序使用Materialize Library。问题是我想添加随机类名称，以便每个标签的背景不同。

<ul class="inline-list" ng-repeat="feature in features"> 
<li class="chip" ng-class="getColor()">{{feature}}</li> 
</ul> 

而且我的控制器，

function ProjectsController($scope) { 
    $scope.features = ['React', 'Redux', 'Firebase']; 
    const colorClass = ['pink lighten-3', 'indigo lighten-2', 'lime accent-1', 
    'amber accent-2','grey darken-2', 'deep-orange darken-1', 'green accent-2', 
    'teal', 'purple', 'red darken-1']; 
    $scope.getColor =() => { 
     return colorClass[Math.floor(Math.random()*10)] 
    } 
} 

浏览器抛出一个错误：

angular.js:10633 Error: [$rootScope:infdig]

请给我一些线索来解决这个问题。

Answer 1

好像你在无限循环的$ scope.digest（）。

Check documentation about [$rootScope:infdig] error:

我建议重写你的控制器是这样的：

function ProjectsController($scope) { 

    const colorClass = ['pink lighten-3', 'indigo lighten-2', 'lime accent-1', 'amber accent-2','grey darken-2', 'deep-orange darken-1', 'green accent-2', 
'teal', 'purple', 'red darken-1']; 


    function getColor() { 
    return colorClass[ 
      Math.floor(Math.random() * 10) 
      ] 
    } 

    $scope.features = [ 
     { technology: 'React', color: getColor() }, 
     { technology: 'Redux', color: getColor() }, 
     { technology: 'Firebase', color: getColor() }, 
    ]; 
} 

另外，你应该修改YOUT HTML：

<ul class="inline-list" ng-repeat="feature in features"> 
    <li class="chip" ng-class="feature.color">{{feature.technology}}</li> 
</ul> 

希望，它有助于