CODEWITHSUNDEEP
cssangularjs
NVO
NVO

Reputation: 2703

How to change div background with color picker angular js

I want to change the background color of a couple of divs based on the choosen color from a colorpicker.

I have tried it using this:

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

I have the right color code in rgbPicker.color (hex code), but the color is not changing. How can I make this work?

Upvotes: 2

Views: 653

Answers (1)

davidkonrad
davidkonrad

Reputation: 85528

Do you really need / want to go through the ngStyle directive, when all you want is to set a background color? Here is a dead simple example using the default <input> color picker which updates the <body> background in a $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

You can replace <body> with any querySelectable' element.

Upvotes: 1

Related Questions