帶生成隨機字符串的函數調用的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> 

希望，它有助於