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

发布时间：2020-12-17 07:01:14 所属栏目：安全来源：网络整理

导读：我在我的应用程序中使用标准的 HTML颜色选择器： input type="color" ng-model="vm.currentUser.color" / 如果我单击该颜色选择器的按钮并手动更改颜色,则会经常更新模型.由于我对vm.currentUser.color有一个监视,因此也经常调用相应的方法,这是有问题的. 有

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

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

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

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

Image of the color picker

解决方法

您可以在该字段上使用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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!