使用颜色选择器减少模型更新次数答案

【问题标题】：Reduce the number of model updates with a color picker使用颜色选择器减少模型更新次数
【发布时间】：2016-02-24 02:59:27
【问题描述】：

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

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

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

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

【问题讨论】：

你试过使用 ng-submit 将值绑定到控制器吗？
试试ng-change="vm.onChange()" ?
jsfiddle.net/maio/HB7LU/20120 with ng-submit

标签： angularjs color-picker

【解决方案1】：

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

例如，只有当值在合理的时间后没有改变时，您才可以更新模型。我将在这里使用 500 毫秒的值，以使效果更加明显，但实际上，较低的值似乎更合适。

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

【讨论】：

【解决方案2】：

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

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>

【讨论】：