using debounce on checkboxes angular

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!

You want them all to be debounced, from one spot? Not exactly sure about the outcome your looking for? — alphapilgrim, May 04 '16 at 20:03
thats probably not the right way i posted above. my expected behavior is you check those two boxes quickly, and the model updates user.cool and user.lame at the same time after waiting a second(or however long) — atsituab, May 04 '16 at 20:07

score 1 · Accepted Answer · edited May 23 '17 at 12:16

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

edited May 23 '17 at 12:16

Community

1
1

answered May 04 '16 at 19:53

shershen

9,875
11
39
60

sorry, the correct link is - https://plnkr.co/edit/AkhEjEg8JCyM32j21MRQ?p=preview – shershen May 04 '16 at 20:03
so my form has a lot of checkboxes that live in a formData object. can I just watch the formData object itself instead of having to explicitly write out each property with a + ??? – atsituab May 04 '16 at 20:10
heres plunkre hat illustrates what I would prefer but its not working as expected https://plnkr.co/edit/SyCf4T5AccPXYmryNWI1?p=preview – atsituab May 04 '16 at 20:14
$watch('user' won't work, try accessing separate props – shershen May 04 '16 at 20:16
1

i dont know who to give the answer to! @alpha thanks as well! – atsituab May 04 '16 at 20:18
Is there an Angular 7 or up version solution for this? or point to the right resource, please - thanks in advance? – Gel Oct 29 '19 at 15:47

score 1 · Answer 2 · answered May 04 '16 at 20:14

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>

using debounce on checkboxes angular

2 Answers2