Using stored colors to set dynamic background color in ng-repeat

Question

My user can input a label and a color in a "theme".

<form>
        <label>Name<input class="additional-input" type="text" ng-model="newTheme.name"></label>
        <label>Color<input class="additional-input" type="color" ng-model="newTheme.color" value="#FFFFFF"></label>
        <button class="hot-button" ng-click="addTheme()">+ Add Theme</button>
    </form>

I then want to be able to see the colors as the default values in the list of labels that have been input with colors. Right now the color pickers under these titles have the default black - is there a way to set the default to the color that is stored in the data? Below is the dummy data from the controller:

var i;
$scope.itemsList = {
    items1: [],
    items2: [],
    items3: []
};

for (i = 0; i <= 5; i += 1) {
    $scope.itemsList.items1.push({'Id': i, 'Label': 'Item A_' + i, "Color": '#CE93D8'});
}

for (i = 0; i <= 5; i += 1) {
    $scope.itemsList.items2.push({'Id': i, 'Label': 'Item B_' + i, "Color": '#CE93D8'});
}
for (i = 0; i <= 5; i += 1) {
    $scope.itemsList.items3.push({'Id': i, 'Label': 'Item C_' + i, "Color": '#CE93D8'});
}

and the html showing the boxes (I'm using ng-sortable to make them drag and drop):

<div id="horizontal-container">
    <div class="sortable-row" as-sortable="sortableCloneOptions" data-ng-model="itemsList.items1">
        <div id="big-item" ng-repeat="item in itemsList.items1" as-sortable-item>
            <div as-sortable-item-handle>{{item.Label}}</div>
            <div> <input type="color" value=item.color> </div>
        </div>
    </div>
</div>

Then the second issue is that I'd like to set the background color of another set of these boxes with these labels to be the color stored with the label in the box (in non-dummy data these will all be different colors). The "bgcolor = item.color" was my attempt at that. Also shown below I have tried script tags but I think it's not working with the ng-repeat? When I took item.color out of the double quotes it broke the whole div.

    <div class="col-sm-2 col-xs-2">
        <div class="column">
            <div class="columnHeader">
                <span class="comp-title">{{client.profile.name}} Comp 1</span>
            </div>
            <div id="big-item" class="sortable-row" as-sortable="sortableOptions" data-ng-model="itemsList.items3">
                <div ng-repeat="item in itemsList.items3" as-sortable-item>
                    <div id="boxes" as-sortable-item-handle bgcolor= item.color>{{item.Label}}
                    <script>
                    document.getElementById("boxes").style.backgroundColor = "item.color"; </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I'm hoping that when one changes the color of a theme in the top row of boxes the background colors of all those theme's boxes made in these lists will change - but that might be a data-binding issue I'll have to address with the real data. (the real data for the bottom list will have groupings of ordered labels/themes that reference back to the first list for the colors). Thanks!

Answer 1

The answers were:

Use ng-model in the edit colorpicker to show the already chosen color- this also binds new color choices to the data. (in angular meteor)

<input type="color" ng-model="item.Color">

^^5th line in 3rd code box

To use background color stored in data inside the ng-repeat add ng-style tag as shown:

<div as-sortable-item-handle ng-style="{'background': item.Color}">{{item.Label}}</div>

^^replaces lines 8-11 in 4th code box

Thanks Daniel_L! And I had to remember to keep the capitalization of header names/variables consistent.