使用存储的颜色在 ng-repeat 中设置动态背景颜色

Question

我的用户可以在 "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>

然后我希望能够将颜色视为已输入颜色的标签列表中的默认值。现在这些标题下的颜色选择器默认为黑色 - 有没有办法将默认设置为存储在数据中的颜色？以下是来自控制器的虚拟数据：

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'});
}

和显示方框的 html（我正在使用 ng-sortable 让它们拖放）：

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

那么第二个问题是，我想将另一组带有这些标签的盒子的背景颜色设置为与盒子中的标签一起存储的颜色（在 non-dummy 数据中，这些将都是不同的颜色）。 "bgcolor = item.color" 是我的尝试。也如下所示，我已经尝试过脚本标签，但我认为它不适用于 ng-repeat?当我从双引号中取出 item.color 时，它打破了整个 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>

我希望当一个人改变顶行框的主题颜色时，这些列表中所有这些主题框的背景颜色都会改变 - 但这可能是一个 data-binding 问题我将不得不处理真实数据。（底部列表的真实数据将包含有序 labels/themes 的分组，这些分组引用回第一个颜色列表）。谢谢！

Answer 1

答案是：

在编辑颜色选择器中使用 ng-model 来显示已经选择的颜色 - 这也会将新的颜色选择绑定到数据。（在 angular 流星中）

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

^^第 3 个代码框中的第 5 行

要使用存储在 ng-repeat 数据中的背景颜色，请添加 ng-style 标签，如下所示：

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

^^替换第 4 个代码框中的第 8-11 行

谢谢Daniel_L！而且我必须记住保持 header names/variables 的大小写一致。

使用存储的颜色在 ng-repeat 中设置动态背景颜色

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

html

javascript

color-picker

background-color

angularjs-ng-repeat