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

Question

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

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

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

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

Answer 1

您可以在该字段上使用ng-change，因为它仅在关闭颜色弹出窗口后触发并且如果发生更改（无论您在弹出窗口中更改颜色多少次）：http://plnkr.co/edit/AjDgoaUFky20vNCfu04O?p=preview < / 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>

Answer 2

自AngularJS 1.3.0-beta.6以来，有一个ngModelOptions指令，非常适合您的问题。它允许您“调整模型更新的完成方式”，这正是您所需要的。

例如，只有在合理的时间后值没有改变时，才能更新模型。我将在这里使用500毫秒的值以使效果真正显现，但在实践中，较低的值似乎更合适。

<input
    type="color"
    ng-model="color"
    ng-model-options="{debounce: 500}"
/>