AngularJS with html5 color input - set value dynamically

Question

I have an input with type color defined in my controller scope:

HTML:

<div ng-controller="MyCtrl">
    <input type="color" value="#f0f0f0" />
    <input type="color" value={{getColor()}} />
</div>

JS:

function MyCtrl($scope) {
    $scope.getColor = function () {
        return "#f0f0f0";
    };
}

The problem is the color don't get updated when its set by Angular, although when inspecting I see this:

enter image description here

See: FIDDLE.

How to update html5 input color dynamically?

I don't know whether the JSFiddle has been updated, but the color was changing for me. Just had a slight delay. — Stacker-flow
– Stacker-flow, Commented Nov 12, 2014 at 9:18

halilb · Accepted Answer · 2014-11-12 09:17:41Z

4

Try to bind it to your controller with ng-model instead of value.

function MyCtrl($scope) {  
    $scope.mycolor = "#f0f0f0";

    $scope.$watch('mycolor', function(newVal) {
        console.log('newVal ' + newVal);
    });
}

Here is updated and working fiddle.

answered Nov 12, 2014 at 9:17

halilb

4,1251 gold badge25 silver badges32 bronze badges

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

1 Comment

Ofiris Over a year ago

Getting rid of value did the trick, I eventually defined the default value using ng-init, see: jsfiddle.net/01qL3tck/13

Prune · Accepted Answer · 2016-08-01 22:21:18Z

0

You don`t even need a $watch, just a $timeout.

function MyCtrl($scope, $timeout) { 
    $timeout(() => {
        $scope.mycolor = "#f0f0f0";
    }) 
}

working fiddle http://jsfiddle.net/3ukL3suf/

edited Aug 1, 2016 at 22:21

Prune

78k14 gold badges63 silver badges83 bronze badges

answered Aug 1, 2016 at 21:59

Martin Mingo Suarez

1

Collectives™ on Stack Overflow

AngularJS with html5 color input - set value dynamically

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related