Question

我正在处理用于过滤一组数据的多个复选框。但是我不希望复选框在每次单击复选框后触发过滤器，所以我想去抖动它。也许在选择最后一个复选框后等待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 }"/>

这里它基本上只是将复选框点击选项排队并将模型更改为秒，但我希望它在同一时间更改两者。我怎么能做到这一点？

谢谢！

Answer 1

您可以在app控制器中使用$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?

以下是更新的插件：https://plnkr.co/edit/AkhEjEg8JCyM32j21MRQ?p=preview

Answer 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>

使用defounce对复选框angular

2 个答案: