Angular debounce on checkboxes allows you to prevent multiple rapid changes from

Question

Angular debounce on checkboxes allows you to prevent multiple rapid changes from

Managing multiple checkboxes to filter a dataset can be tricky. I am looking for a way to debounce the checkbox selection so that the filter is only triggered after a certain period of time, like waiting 500ms to a second after the last checkbox has been clicked.

To see an example, check out 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 }"/>

The current setup queues the click options and changes the model one by one with a delay, but I want both checkboxes to change at the same time. How can I achieve this?

Thank you!

javascript angularjs

Answer 1

Answer №1

Utilize $scope.$watch within your application controller to manage the outcome of changes in multiple model properties. With $watch, you can assess not just a single property but also an expression; subsequently, the callback can be debounced before notifying Angular about the necessary changes by invoking $scope.$apply.

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

For more information, refer to this article: Can I debounce or throttle a watched <input> in AngularJS using _lodash?

You can view the updated plunk here: https://plnkr.co/edit/AkhEjEg8JCyM32j21MRQ?p=preview

Answer 2

Utilize $scope.$watch within your application controller to manage the outcome of changes in multiple model properties. With $watch, you can assess not just a single property but also an expression; subsequently, the callback can be debounced before notifying Angular about the necessary changes by invoking $scope.$apply.

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

For more information, refer to this article: Can I debounce or throttle a watched <input> in AngularJS using _lodash?

You can view the updated plunk here: https://plnkr.co/edit/AkhEjEg8JCyM32j21MRQ?p=preview

Answer 3

Answer №2

If you use angular's $watchCollection method, you won't need any additional features. It simplifies the process.

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

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

To make your form more concise, define debounce once and adjust your form 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>

Answer 4

If you use angular's $watchCollection method, you won't need any additional features. It simplifies the process.

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

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

To make your form more concise, define debounce once and adjust your form 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>

Angular debounce on checkboxes allows you to prevent multiple rapid changes from

Answer №1

Answer №2

Similar questions

Utilizing dynamic class and color binding features in VueJs?

Can you explain the distinction between employing express.urlencoded() with extended set to true as opposed to setting it to false along with performing manual JSON stringify/parse calls?

Submit Button Field - HTML ButtonFor

Tips for extracting and structuring strings from unstructured CSV data using JavaScript?

Ext JS - A grid cell containing varying values, accompanied by a selection of combo boxes

How can you determine if all specified events have been triggered in jQuery?

Updating or deleting query strings using JavaScript

Accessing array values depending on DOM response

React Native: Once a user has successfully logged in, I would like the app to automatically direct them to the "Home" screen

Exploring a Discord.js collection: tips for accessing and manipulating objects within an array in the collection

Enable CORS for AJAX requests with RESTful web services in Google Chrome

LeadFoot's intern framework encountered difficulty locating an element

cannot wait for promise in loop to avoid delaying the request

Using Typescript to implement an onclick function in a React JS component

Vuex getters not displaying expected values in computed properties until entire page has finished loading

TypeScript and the Safety of Curried Functions

What causes certain webpack / Babel ES6 imports without a specified extension to resolve as "undefined"?

Exploring the nuances of receiving responses with NextJs, Nodemailer, and Fetch

Error: Unable to retrieve data through Ajax request

the sizing issue with three div elements