How to change div background with color picker angular js

Question

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?

I don''t think so that you need add selector for 'ng-style'. You should type: <div ng-style="{background-color: '{{rgbPicker.color}} !important}'">. If rgbPicker.color is in hex mode then you should use: <div ng-style="{background-color: '#{{rgbPicker.color}} !important}'">. — Hanif
– Hanif, Commented Dec 22, 2017 at 9:41

davidkonrad · Accepted Answer · 2017-12-22 09:51:27Z

1

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.

answered Dec 22, 2017 at 9:51

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NVO Over a year ago

nice! That works! Created an var divs = queryselectorAll('[id^='color']') and a loop [].forEach.call(divs, function(div){ }) through the found divs to change the color with div.style['background-color'] = $scope.rgbPicker.color

Collectives™ on Stack Overflow

How to change div background with color picker angular js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related