ng-repeat爲每一行設置一個隨機顏色

Question

我想從ng-repeat中的每個元素中的數組中設置一個隨機背景顏色。這是一個簡單的提琴我做：

http://jsfiddle.net/akbb6car/2/

正如你看到的，我的問題是我不能設置顏色中的每個「行」，但它在所有行同一組。我無法理解如何解決這個問題。我也嘗試使用id="$index"，但不起作用。這裏有一些代碼：

<div ng-app="myApp" ng-controller="dummy"> 
    <div ng-repeat="customer in customerData" class="col-sm-3"> 
     <div ng-init="getRandomColor()" class="contact-box" ng-style="{background: bgColor}">&nbsp; {{customer.name}} got: {{customer.color}}</div> 
    </div> 
</div> 


angular.module('myApp', ['ngSanitize']) 
    .controller('dummy', ['$scope', function ($scope) { 

     $scope.doc_classes_colors = [ 
      "#339E42", 
      "#039BE5", 
      "#EF6C00", 
      "#A1887F", 
      "#607D8B", 
      "#039BE5", 
      "#009688", 
      "#536DFE", 
      "#AB47BC", 
      "#E53935", 
      "#3F51B5" 
     ]; 
     $scope.bgColor = "#339E42"; 
    $scope.getRandomColor = function() { 
$scope.bgColor = $scope.doc_classes_colors[Math.floor(Math.random() * $scope.doc_classes_colors.length)]; 
    }; 

    $scope.customerData = [{ 
     name: "Mike" 
    }, { 
     name: "Tom" 
    }, { 
     name: "ASD" 
    }, { 
     name: "Lol" 
    }]; 

}]); 

Answer 1

您的顏色列表已經在範圍內，爲什麼不只是從它的基礎上選擇一個新的顏色？

<div class="contact-box" ng-style="{background: doc_classes_colors[$index % doc_classes_colors.length]}"> 

http://jsfiddle.net/akbb6car/6/

我用$index % doc_classes_colors.length，而不是僅僅$index以便使顏色重複，如果你有比色彩更行。

如果你願意引進依賴於lodash，有一個方便的_.shuffle方法隨機名單，這將使在頁面加載的隨機顏色的訂單的訂單。顏色會以相同的順序重複，但每個頁面加載都會以不同的順序排列顏色列表。

http://jsfiddle.net/akbb6car/8/

如果你不想在lodash帶來，我可能只是看看他們的源代碼，看看他們是如何做到這一點，我不知道隨便。