在角度复选框上使用反跳

Question

I am dealing with multiple checkboxes used to filter a set of data. however I do not want the checkboxes to trigger a filter after every single click of a checkbox so I wanted to debounce it. perhaps wait 500ms to a second after the last checkbox has been selected.

check out the my 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 }"/>

here it basically just queues the checkbox click options and changes the model seconds apart but I want it to change both at the SAME time. How can I accomplish this?

Thanks!

Answer 1

You may use $scope.$watch in your app controller to control over result of multiple model properties changes. $watch can evaluate not only single property but also an expression; then callback can be debounced; later notify angular about the changes needed via calling $scope.$apply .

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

Also check this post: Can I debounce or throttle a watched <input> in AngularJS using _lodash?

Here is the updated plunk: https://plnkr.co/edit/AkhEjEg8JCyM32j21MRQ?p=preview

Answer 2

You could just angular's $watchCollection method, it'll do the same. No extras required.

(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);

More concise form, one debounce definition and your form would look like this :

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