Using an AngularJS filter once the "Apply" button has been triggered

Question

Using an AngularJS filter once the "Apply" button has been triggered

I am facing an issue with a large dataset containing over 4000 items. Whenever I start typing, my browser freezes for up to 15 seconds. To resolve this problem, I want to disable the auto-filter feature and only apply the filter function when a button is clicked. Despite searching on Google, I couldn't find a solution. Can someone help me please? :)

Code:

<input ng-model="search.phone" type="text" placeholder="Phone...">
<input ng-model="search.name" type="text" placeholder="Name...">
<input ng-model="search.city" type="text" placeholder="City...">

<div ng-repeat="user in users | filter:search" class="user_block" ng-include src="userTemplate"></div>

and controller:

app.controller("smsCtrl", ['$scope', 'smsData', 'createDialog', '$http', '$filter', function($scope, smsData, createDialog, $http, $filter){...}

javascript angularjs filtering

Answer 1

Answer №1

When assisting a coworker, I encountered a similar situation where manually triggering the search filter was necessary. To simplify the process, I developed an alternative solution.

Start by utilizing your original repeating div.

<div ng-repeat="user in users | filter:search">
    ...
</div>

Next, set up an object to store user input.

$scope.search = {};
$scope.userInput = {};

Link your input fields to this user input object.

<input type="text" ng-model="userInput.name" />
<input type="text" ng-model="userInput.phone" />
<input type="text" ng-model="userInput.city" />

Create a function that iterates through the properties of the user input object and copies them to the search object.

$scope.applySearch = function() {
    for(prop in $scope.userInput) {
        $scope.search[prop] = $scope.userInput[prop];
    }
};

Finally, add a button to execute the search function.

<button ng-click="applySearch()">Search</search>

Hopefully, this solution proves beneficial to others facing a similar challenge.

Answer 2

When assisting a coworker, I encountered a similar situation where manually triggering the search filter was necessary. To simplify the process, I developed an alternative solution.

Start by utilizing your original repeating div.

<div ng-repeat="user in users | filter:search">
    ...
</div>

Next, set up an object to store user input.

$scope.search = {};
$scope.userInput = {};

Link your input fields to this user input object.

<input type="text" ng-model="userInput.name" />
<input type="text" ng-model="userInput.phone" />
<input type="text" ng-model="userInput.city" />

Create a function that iterates through the properties of the user input object and copies them to the search object.

$scope.applySearch = function() {
    for(prop in $scope.userInput) {
        $scope.search[prop] = $scope.userInput[prop];
    }
};

Finally, add a button to execute the search function.

<button ng-click="applySearch()">Search</search>

Hopefully, this solution proves beneficial to others facing a similar challenge.

Answer 3

Answer №2

Why not give adding a debounce a try instead of relying on a button?

Check out this link for a helpful debounce code created by Lars Gersmann. You can see how it works in his JSFiddle example linked at the end of the article.

This excerpt is from pull request #2129 of AngularJS project on GitHub:

Moreover, using an ng-update-model-debounce attribute allows delaying the actual model update after the last triggered event. Note that this feature does not apply to radio buttons.

For instance, setting ng-update-model-debounce="500" will introduce a delay of 500ms.

Here's a practical way to implement debounce:

/**
 * The uiDebounce service offers a solution for creating a wrapper function
 * that ensures the wrapped function is not called more frequently than a specified time interval.
 *
 * @param {!Function} func The function being wrapped (debounced)
 * @param {number} wait Time interval between calls to func
 * @param {Boolean} immediate If true, the function is invoked on the first call to the
 * wrapper function; otherwise, the call occurs only after the wait time has elapsed
 * @return {Function} A debounced wrapper around the func function.
 */
angular.module('ui.services').factory('uiDebounce', function($timeout, $q) {
  return function(func, wait, immediate) {
    var timeout;
    var deferred = $q.defer();
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) {
          deferred.resolve(func.apply(context, args));
          deferred = $q.defer();
        }
      };
      var callNow = immediate && !timeout;
      if (timeout) {
        $timeout.cancel(timeout);
      }
      timeout = $timeout(later, wait);
      if (callNow) {
        deferred.resolve(func.apply(context, args));
        deferred = $q.defer();
      }
      return deferred.promise;
    };
  };
});

Source: Github - Angular-UI

Answer 4

Why not give adding a debounce a try instead of relying on a button?

Check out this link for a helpful debounce code created by Lars Gersmann. You can see how it works in his JSFiddle example linked at the end of the article.

This excerpt is from pull request #2129 of AngularJS project on GitHub:

Moreover, using an ng-update-model-debounce attribute allows delaying the actual model update after the last triggered event. Note that this feature does not apply to radio buttons.

For instance, setting ng-update-model-debounce="500" will introduce a delay of 500ms.

Here's a practical way to implement debounce:

/**
 * The uiDebounce service offers a solution for creating a wrapper function
 * that ensures the wrapped function is not called more frequently than a specified time interval.
 *
 * @param {!Function} func The function being wrapped (debounced)
 * @param {number} wait Time interval between calls to func
 * @param {Boolean} immediate If true, the function is invoked on the first call to the
 * wrapper function; otherwise, the call occurs only after the wait time has elapsed
 * @return {Function} A debounced wrapper around the func function.
 */
angular.module('ui.services').factory('uiDebounce', function($timeout, $q) {
  return function(func, wait, immediate) {
    var timeout;
    var deferred = $q.defer();
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) {
          deferred.resolve(func.apply(context, args));
          deferred = $q.defer();
        }
      };
      var callNow = immediate && !timeout;
      if (timeout) {
        $timeout.cancel(timeout);
      }
      timeout = $timeout(later, wait);
      if (callNow) {
        deferred.resolve(func.apply(context, args));
        deferred = $q.defer();
      }
      return deferred.promise;
    };
  };
});

Source: Github - Angular-UI

Answer 5

Answer №3

I finally figured it out!

Replace:

<div ng-repeat="user in users | filter:search" class="user_block" ng-include src="userTemplate"></div>

With:

<div ng-repeat="user in users" ng-hide="user.excludedByFilter" class="sms_user_block" ng-include src="userTemplate"></div>

Don't forget to add the "applySearchFilter" function to the controller

    $scope.applySearchFilter = function() {
        var nameFilter = $scope.filters.name.toLowerCase();
        var phoneFilter = $scope.filters.phone;
        var cityFilter = $scope.filters.city;
        var showAll = 0 === nameFilter.length && 0 === phoneFilter.length && 0 === cityFilter.length;
        angular.forEach($scope.users, function(user) {
            if (showAll) {
                user.excludedByFilter = false;
            } else {
                user.excludedByFilter = (user.name.toLowerCase().indexOf(nameFilter) === -1) 
                                        || (user.phone.indexOf(phoneFilter) === -1) 
                                        || (user.city.indexOf(cityFilter) === -1);
            }
        });
    }

Additionally, include this html code for the filter button:

<a class="btn btn-primary" href="#" ng-click="applySearchFilter()">Apply filters</a>

Success!

*Please note that I modified ng-model="search.*" to ng-model="filters.*" in inputs.

Answer 6

I finally figured it out!

Replace:

<div ng-repeat="user in users | filter:search" class="user_block" ng-include src="userTemplate"></div>

With:

<div ng-repeat="user in users" ng-hide="user.excludedByFilter" class="sms_user_block" ng-include src="userTemplate"></div>

Don't forget to add the "applySearchFilter" function to the controller

    $scope.applySearchFilter = function() {
        var nameFilter = $scope.filters.name.toLowerCase();
        var phoneFilter = $scope.filters.phone;
        var cityFilter = $scope.filters.city;
        var showAll = 0 === nameFilter.length && 0 === phoneFilter.length && 0 === cityFilter.length;
        angular.forEach($scope.users, function(user) {
            if (showAll) {
                user.excludedByFilter = false;
            } else {
                user.excludedByFilter = (user.name.toLowerCase().indexOf(nameFilter) === -1) 
                                        || (user.phone.indexOf(phoneFilter) === -1) 
                                        || (user.city.indexOf(cityFilter) === -1);
            }
        });
    }

Additionally, include this html code for the filter button:

<a class="btn btn-primary" href="#" ng-click="applySearchFilter()">Apply filters</a>

Success!

*Please note that I modified ng-model="search.*" to ng-model="filters.*" in inputs.

Using an AngularJS filter once the "Apply" button has been triggered

Answer №1

Answer №2

Answer №3

Similar questions

Add a JSON file containing an image path as a value into a CSS background property

What is the best way to view all of the objects in an array?

Mobile devices do not support HTML5 Video playback

As the input field is modified, HTML transforms accordingly

Step by step guide to showcasing images dynamically in user interface

Troubleshooting the Create Order Issue: Integrating PayPal Checkout with Smart Payment Buttons using React and Redux

Encountering a bug that states "TypeError: Cannot read properties of null (reading 'useState')" while trying to use useState in a react application

What is the main function of .promise() in Nodejs Lambda functions?

Using PHP and AJAX, populate a table based on the selection made from a dropdown

Problem with AngularJS Select Box

Retrieving user input in Angular and showcasing extracted keywords

Why doesn't the div click event trigger when the mouse hovers over an iframe?

Encountered a CastError in Mongoose when trying to cast the value "Object" to a string

The latest update of NextJS, version 13.1.4, encounters issues when implementing SCSS support with the error message "Module next/dist/compiled/sass-loader/fibers.js not

How can I trigger a CSS animation to replay each time a button is clicked, without relying on a timeout function?

Is the ID selector the quickest method in jQuery and CSS?

Can an $mdToast be positioned at the top of the page on a small viewport?

What is the technique for transmitting a child element in VueJS?

Error: The variable "deleted1" is not declared and cannot be used on the HTML button element's onclick

Using Node.JS and Socket.io to determine if a tab is currently active