使用颜色选择器减少模型更新的数量

Question

我在我的应用程序中使用标准的HTML颜色选择器:

<input type="color" ng-model="vm.currentUser.color" />

如果我单击该颜色选择器的按钮并手动更改颜色,则会经常更新模型.由于我有一个监视vm.currentUser.color,相应的方法也经常被调用,这是有问题的.

有没有办法只在点击颜色选择器的OK按钮时设置模型变量？

Answer 1

您可以ng-change在该字段上使用，因为它仅在颜色弹出窗口关闭后并且发生更改时触发（无论您更改弹出窗口内的颜色多少次）：http://plnkr.co/edit/AjDgoaUFky20vNCfu04O ?p=预览

angular.module('app', [])
  .controller('Ctrl', function($scope, $timeout) {
    $scope.x = '#ff0000';
    $scope.res = '';
    $scope.a = function(x) {
      console.log(x);
      $scope.res = 'Color changed to ' + x;
      $timeout(function(){$scope.res = ''}, 2000);
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
  <input type="color" ng-model="x" ng-change="a(x)">
  <p>{{res}}</p>
</div>