ng-repeat 中的随机颜色 Divs 具有未知数量的项目答案

【问题标题】：Randomly Color Divs inside ng-repeat with unknown number of Itemsng-repeat 中的随机颜色 Divs 具有未知数量的项目
【发布时间】：2016-09-01 10:22:25
【问题描述】：

我有数据（比如项目列表），它来自 $http.get 请求。我想要更改包含 ng-repeat div 下项目的 div 的颜色。项目的数量是随机的。
我的代码
controller.js

$http.post("ServerUrl")
    .success(function(data) { 
    $scope.data = data;
    })
    .error(function(err) {
    alert(err);
    })

模板

<div ng-repeat="data in data">
{{data}}
</div>

我想要什么

我尝试过的
好吧，我尝试在 $scope 中添加一些颜色并在模板中重复它们，但是如果我在 $scope 中添加了 5 种颜色，那么它只会在模板中为 5 个 div 着色（按预期工作）。 所以我想要一种方法，让我可以为从 $http 请求返回的任意数量的项目随机重复颜色。

【问题讨论】：

我认为你必须看看这个，link
感谢此链接，但这并不能解决我的问题。我在这里处理 $http

标签： jquery html css angularjs ionic-framework

【解决方案1】：

你可以定义你是否想要一些特定的颜色，然后让它们重复。

 $scope.colorCodeArray = [
         "#339E42",
         "#039BE5",
         "#EF6C00",
         "#A1887F",
         "#607D8B",
         "#039BE5",
         "#009688",
    ];


  <div ng-repeat="data in data">
  <div ng-style="{background: colorCodeArray[$index % colorCodeArray.length]}" >{{data}}</div>
    </div>

【讨论】：

不错的解决方案，@neda！
是的，这就是我要问的问题。你能解释一下 [$index % colorCodeArray.length] 的作用吗？
$index 是数组当前元素（int）的索引值。因此，假设您从数据数组中获得第 7 个索引，并且您的颜色数组有 5 种颜色。此代码获取 colorCodeArray[2] 并将您的背景设置为此颜色。 @阿图拉
如果 colorCodeArray 长度小于数据长度，则颜色要重复 [$index % colorCodeArray.length]

【解决方案2】：

你可以这样做：

这里的诀窍是$index，它告诉你迭代在哪里。

(function() {
  
  var app = angular.module('app', []);
  
  app.controller('MainController', MainController);
  
  function MainController() {
    
    var self = this;
    self.data = ['ABC', 'DEF', 'GHI', 'JKL', 'MNO', 'PQR'];
    self.style = function(index) {
      
      var red = index * 40;
      var green = index * 40;
      var blue = index * 40;
      
      var color = 'color: rgb('+red+', '+green+', '+blue+')';
      return color;
      
      }
    
    }
  
  })();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="app" ng-controller="MainController as vm">
  <div ng-repeat="dz in vm.data" style="{{ vm.style($index) }}">
    {{dz}}
  </div>
</div>

【讨论】：

【解决方案3】：

例如。

<!DOCTYPE html>
<html ng-app="mainApp" lang="en">
<head>

    <title>Random Color</title>


<script src="angular.min.js"></script>

<style>

div {
   border: "2px solid black";
}

</style>    

<script>
     var app = angular.module('mainApp', []);
     app.controller('MyCtrlr', function ($scope, $http) {


                      //$http.get("YOUR_AJAX_URL").success(function(response){

                         $scope.randomColor = function(){
                           var color = "#"+((1<<24)*Math.random()|0).toString(16);
                           return color;

                         }

                         $scope.data = [111, 222, 333, 444, 555];

                         alert($scope.data);

                       //});

 });



  </script>

</head>



 <body ng-controller="MyCtrlr" >


    <div ng-repeat="data in data" style="background-color: {{randomColor()}}">
        Color {{data}}
    </div>

   </body>

</html>

【讨论】：

嗨，Jenson，你介意解释一下((1<<24)*Math.random()|0) 的作用吗？谢谢
@GabrielCâmara 这一切都是为了生成一个随机的十六进制颜色代码。 << 表示将二进制表示中的 a 向左移动 b (
太棒了！感谢分享！

【解决方案4】：

这是您可以尝试的另一种解决方案：

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

      $scope.getRandomColor = function() {
        var randomNumber = getRandomNumber(0, $scope.colors.length - 1);
        console.log(randomNumber)
        return $scope.colors[randomNumber];
      };

      $scope.colors = ['#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688'];
      $scope.boxData = [{
        name: "Box 1"
      }, {
        name: "Box 2"
      }, {
        name: "Box 3"
      }, {
        name: "Box 4"
      }];

    }
  ]);

function getRandomNumber(min, max) {
  return Math.ceil(Math.random() * (max - min) + min);
}

.contact-box {
  width: 90px;
  height: 50px;
  dispaly: block;
  margin-bottom: 5px;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="AppCtrl">
  <div ng-repeat="b in boxData">
    <div class="contact-box" ng-style="{'background-color': getRandomColor() }">{{ b.name }}</div>
  </div>
</div>

JsFiddle

【讨论】：