javascript - 带有 html5 颜色输入的 AngularJS - 动态设置值

Question

我的 Controller 范围内定义了一个颜色类型的输入:

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";
    };
}

问题是颜色在由 Angular 设置时不会更新，尽管在检查时我看到了这一点:

参见:FIDDLE .

如何动态更新html5输入颜色？

Answer 1

尝试使用 ng-model 而不是 value 将其绑定(bind)到您的 Controller 。

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

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

这里已更新并正在运行 fiddle .