Ofiris Ofiris - 1 year ago 116
Javascript Question

AngularJS with html5 color input - set value dynamically

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


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


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


How to update html5 input color dynamically?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download