在复选框上使用 debounce答案

【问题标题】：using debounce on checkboxes angular在复选框上使用 debounce
【发布时间】：2016-05-04 19:43:06
【问题描述】：

我正在处理用于过滤一组数据的多个复选框。但是我不希望复选框在每次单击复选框后触发过滤器，所以我想去抖动它。可能在最后一个复选框被选中后等待 500 毫秒到一秒。

查看我的plnkr

     <input type="checkbox"
       ng-model="user.cool"
       ng-model-options="{ debounce: 1000 }"/>
 <input type="checkbox"
       ng-model="user.lame"
       ng-model-options="{ debounce: 1000 }"/>

这里它基本上只是将复选框单击选项排入队列并更改模型几秒钟，但我希望它同时更改两者。我怎样才能做到这一点？

谢谢！

【问题讨论】：

您希望它们全部从一个位置去抖动？不确定您要寻找的结果？
这可能不是我在上面发布的正确方式。我的预期行为是您快速检查这两个框，并且模型在等待一秒钟（或多长时间）后同时更新 user.cool 和 user.lame

标签： javascript angularjs

【解决方案1】：

您可以在应用控制器中使用$scope.$watch 来控制多个模型属性更改的结果。 $watch 不仅可以评估单个属性，还可以评估表达式；然后回调可以去抖动；稍后通过调用$scope.$apply 通知 Angular 所需的更改。

$scope.$watch('user.lame + user.cool', _.debounce(function (id) {
   $scope.$apply(function() {
      //code that updates UI
   })
}, 1000));

另请查看此帖子：Can I debounce or throttle a watched <input> in AngularJS using _lodash?

这里是更新的 plunk：https://plnkr.co/edit/AkhEjEg8JCyM32j21MRQ?p=preview

【讨论】：

对不起，正确的链接是-plnkr.co/edit/AkhEjEg8JCyM32j21MRQ?p=preview
所以我的表单有很多复选框，它们位于 formData 对象中。我可以只看 formData 对象本身，而不必用 + 显式写出每个属性 ???
here plunkre hat 说明了我更喜欢什么，但它没有按预期工作plnkr.co/edit/SyCf4T5AccPXYmryNWI1?p=preview
$watch('user' 不起作用，请尝试访问单独的道具
我不知道该给谁回答！ @alpha 也谢谢！

【解决方案2】：

您可以只使用 Angular 的 $watchCollection 方法，它也会这样做。无需额外费用。

(function(angular) {
  'use strict';
  angular.module('optionsExample', [])
    .controller('ExampleController', ['$scope',
      function($scope) {
        $scope.user = {
          name: 'Igor'
        };
        $scope.$watchCollection('user', function(n, o) {

          console.log(n);
        });
      }
    ]);
})(window.angular);

更简洁的表格，一个去抖动定义，您的表格将如下所示：

<form name="userForm" ng-model="user" ng-model-options="{ debounce: 1000 }">
  <label>Name:
    <input type="text" name="userName" ng-model="user.name" />
    <input type="checkbox" ng-model="user.cool" />
    <input type="checkbox" ng-model="user.lame" />
  </label>
  <button ng-click="userForm.userName.$rollbackViewValue(); user.name=''">Clear</button>
  <br />
</form>

【讨论】：