Question

我想根据颜色选择器中的选择颜色更改几个div的背景颜色。

我用它试过了：

<div ng-style="[id^='color']{background-color: '{{rgbPicker.color}} !important}'">
    <div bind-html-compile="body">
        <div id="color1"></div>
        <div id="color2"></div>
        <div id="color3"></div>
        <div id="color4"></div>
    </div>
</div>

我在rgbPicker.color（十六进制代码）中有正确的颜色代码，但颜色没有变化。我怎样才能做到这一点？

Answer 1

当你想要的只是设置背景颜色时，你真的需要/想要通过ngStyle指令吗？以下是使用默认<input>颜色选择器的简单示例，它会更新<body>中的$watch背景：

<input type="color" ng-model="color">

$scope.color = '#ffffff'
var body = document.querySelector('body');  
$scope.$watch('color', function(newVal) {
  body.style.backgroundColor = newVal
})

<强> http://plnkr.co/edit/jdWdaqejBLb1hjXF680f?p=preview

您可以将<body>替换为任何querySelectable＆＃39;元件。

如何使用颜色选择器角度js

1 个答案: