使用存储的颜色设置ng中的动态背景颜色重复
Using stored colors to set dynamic background color in ng-repeat
我的用户可以在"主题"中输入标签和颜色。
<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>
第二个问题是,我想将另一组带有这些标签的盒子的背景色设置为与盒子中的标签一起存储的颜色(在非伪数据中,这些都是不同的颜色)。"bgcolor=item.color"就是我的尝试。下面还显示了我尝试过脚本标签,但我认为它不适用于ng重复?当我把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>
我希望当改变最上面一行框中主题的颜色时,这些列表中所有主题框的背景色都会改变——但这可能是一个数据绑定问题,我必须用真实数据来解决。(底部列表的真实数据将具有有序标签/主题的分组,这些标签/主题引用回颜色的第一个列表)。谢谢
答案是:
在编辑颜色选择器中使用ng模型来显示已经选择的颜色-这也将新的颜色选择绑定到数据。(在角流星中)
<input type="color" ng-model="item.Color">
^^第3个代码框中的第5行
要使用存储在ng内部数据中的背景色,请重复添加ng样式标签,如图所示:
<div as-sortable-item-handle ng-style="{'background': item.Color}">{{item.Label}}</div>
^^替换第4个代码框中的第8-11行
谢谢Daniel_L!我必须记住保持标题名称/变量的大小写一致。
相关文章:
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 动态更改高图中的系列颜色
- d3.hexbin插件-动态定义颜色域以适应数据
- 如何动态创建许多Jquery颜色选择器(eyecon)
- Javascript对象颜色动态变化
- 使用ngRepeat中的Angular动态更改元素颜色
- 如何在flash html5画布项目中动态更改文本颜色
- 通过javascript for Twitter Bootstrap动态更改进度条的颜色
- react native中的动态颜色
- jQuery mobile-动态更改ui页面背景颜色
- 动态更改字体颜色和URL
- JavaScript 更改动态添加的行的颜色
- 如何在动态 js 中更改一组节点的颜色
- 传单实时GeoJSON动态标记颜色更改
- 动态更改敲除js中一行的颜色
- 动态更改jQuery移动图标的背景颜色
- 如何在谷歌地图api中动态更改圆圈颜色
- 如何根据高图中的值获得动态颜色变化
- 谷歌柱状图随机颜色动态数据
- 如何从一组颜色动态地改变聚合物1.0纸按钮的颜色