Случайно Цвет Divs внутри ng-repeat с неизвестным количеством элементов

У меня есть данные (скажем, список элементов), и он исходит из запроса $ http.get. I хочу изменить цвет divs, содержащий элементы под ng-repeat div. Количество предметов случайное.
Мой код
controller.jsСлучайно Цвет Divs внутри ng-repeat с неизвестным количеством элементов

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

шаблон

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

Я хочу

Что я пробовал
Ну, я попытался поместить некоторые цвета в $ scope и повторил их в шаблоне, но если бы я поместил 5 цветов в $ scope, тогда он окрашивает только 5 div в шаблон (работает как ожидалось). Так что я хочу способ, которым я могу повторять цвет случайным образом для любого количества элементов, возвращающихся из запроса $ http.

источник

2016-05-06 Atula

Я думаю, вы должны смотреть на это, [ссылка] (HTTP: // StackOverflow .com/questions/32326155/generate-random-colors-using-angular-ng-repeat) – vijay

Спасибо за эту ссылку, но это не решит m y проблема. Я имею дело с $ http здесь – Atula

Вы можете определить, хотите ли вы какие-то определенные цвета, а затем повторите их.

$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>

источник

2016-05-06 11:13:15 Hmahwish

Хорошее решение, @neda! –

Да, это то, о чем я прошу. Можете ли вы объяснить, что означает * [$ index% colorCodeArray.length] *? – Atula

$ index - это значение индекса массива текущего элемента (int). Итак, предположим, что вы получаете 7-й индекс из массива данных, а ваш цветной массив имеет 5 цветов. Этот код получает colorCodeArray [2] и устанавливает фон в этот цвет. @Atula – oguzhan00

Вы можете сделать что-то вроде этого:

Хитрость здесь является $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>

источник

2016-05-06 11:14:37

Например.

<!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>

источник

2016-05-06 11:26:49

Привет, Дженсон, не могли бы вы объяснить, что делает '((1 << 24) * Math .random() | 0) 'it do? Спасибо –

@ GabrielCâmara Это все о создании случайного кода цвета Hex. '<<' означает сдвиг a в двоичном представлении b (<32) бит влево, смещение в нулях справа. –

Отлично! Спасибо, что поделился! –

Вот еще одно решение, которое вы можете попробовать:

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

источник

2016-05-06 11:37:42

Случайно Цвет Divs внутри ng-repeat с неизвестным количеством элементов

ответ

Смежные вопросы