Multiple RGB строка коробки цвета

Question

В принципе я это JSFiddle,

Как вы можете видеть на скрипке есть длинная строка чисел (они код RGB)

Вы можете увидеть, что там также это всего лишь одна коробка внутри mydiv (полностью забыл добавить остальных в палитру).

В основном мне нужны все остальные коды RGB, чтобы иметь свой собственный ящик, чтобы показывать цвета, которые представляет RGB.

Вот код для вас ни JS Fiddlers

HTML

<span class="glyphicon glyphicon-ok"></span> 
    <h3>Make a Custom Theme from your image</h3> 
    <p> Based on your logo we believe this is the best colour scheme for you</p> 
    <div id="mydiv" style="background-color: rgb({{dominantColor}})"></div> 
    <h4>{{palette}}</h4> 
    <h4> 
     [[59,214,252],[217,236,252],[14,137,250],[4,31,156],[43,188,251],[13,86,199],[107,162,231],[53,117,204],[61,159,245]] 
    </h4> <!-- This is whats returned via the {{palette}} --> 
    <p>is this correct?</p> 
    <!--<button type="submit" class="btn btn-danger">Submit</button>--> 
</div> 

Css

#mydiv { 
    width: 100px; 
    height: 100px; 
    border: 1px solid #000; 
} 

Я ожидаю использовать JS, чтобы разделить коды, я не могу вернуть данные без квадратных скобок [] Так что в теории мне нужно js, чтобы захватить каждый код rgb и отобразить цвет внутри коробки.

Answer 1

Половина испеченного jsfiddle не очень помогает. Fiddle предназначен для рабочего примера, чтобы мы могли видеть существующее условие и отлаживать сразу, а не для того, чтобы вы вставляли свой код для чтения людьми.

Пожалуйста, обратитесь к фрагменту решения. Вы можете использовать ng-style для динамического размещения значений rgb в стиле css.

angular.module('test', []) 
 

 
.controller('Test', function($scope){ 
 
    $scope.data = [[59,214,252],[217,236,252],[14,137,250],[4,31,156],[43,188,251],[13,86,199],[107,162,231],[53,117,204],[61,159,245]]; 
 
});

.box { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid #000; 
 
    float: left; 
 
    margin-right: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> 
 

 
<div ng-app='test' ng-controller='Test'> 
 
    <div class='box' ng-style="{'background-color': 'rgb('+color[0]+', '+color[1]+', '+color[2]+')'}" ng-repeat='color in data'></div> 
 
</div>