Ofiris Ofiris - 4 months ago 29
Javascript Question

AngularJS with html5 color input - set value dynamically

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?

Answer

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.