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带来，我可能只是看看他们的源代码，看看他们是如何做到这一点，我不知道随便。