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

Tips for extracting data from a JQuery table with Python

The text color remains the same even after the method has returned a value

Having trouble receiving a complete response when making an ajax request to fetch an entire webpage

Using Angular Material to alter the value of ng-model in the user interface

What is the manual way to activate Ratchet's push feature?

Tips on sending a function's return value to an object in Node.js

In AngularJS, when a user clicks on a specific element, the program should fetch the corresponding value from a separate dataset and display it

Adding content to a text field and then moving to the next line

Executing the onSuccess callback in Ajax without any ability to manipulate the ajax requests

Obtaining the final field with the $in operator in Mongoose

Acquiring the API through the callback function within a React application

Should the secret for express-session be a fixed value or should it change dynamically?

Alas, an error has occurred with eslint npm. The elusive 404 Not Found reared its head once more when attempting to access the es

Tips for retrieving nested data objects from a JSON API on the web

Determining when all $http requests have completed in AngularJS

Storing data locally in Angular applications within the client-side environment

Prevent rapid event triggers with a jQuery slider

The functionality of socket.io is not functioning properly on the server, resulting in a 404

Managing the file order within subdirectories for Rails assets

Pattern matching for a string with numerous repetitions using Regular Expressions