在单击“应用”按钮后应用angularjs过滤器

Applying a angularjs filter after "Apply" button click

本文关键字：应用 angularjs 过滤器 按钮 单击      更新时间：2023-09-26

我有一个很大的数据列表（4000+项目）。开始打字时 - 我的浏览器冻结（最多 15 秒）。所以我需要关闭自动过滤功能，并将过滤功能绑定到按钮单击。通过谷歌寻找答案没有结果。我该怎么做？请帮帮我:)

法典： 

<input ng-model="search.phone" type="text" placeholder="Телефон...">
<input ng-model="search.name" type="text" placeholder="Имя...">
<input ng-model="search.city" type="text" placeholder="Город...">
<div ng-repeat="user in users | filter:search" class="user_block" ng-include src="userTemplate"></div>

和控制器：

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

帮助同事时遇到了类似的事情（尽管在我们的例子中需要过滤手动触发的搜索），并提出了一个类似但稍微简单的解决方案。

使用原始重复div。

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

创建用于存储用户输入的对象。

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

将输入附加到此用户输入对象。

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

创建一个函数，该函数循环用户输入对象的属性并将其复制到搜索对象。

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

最后，创建一个按钮来调用搜索函数。

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

我希望这对某人有所帮助。

也许您可以尝试在其上添加去抖动并忘记按钮。

点击一个不错的去抖代码的链接来应用Lars Gersmann创建的任何DOM。你可以在文章末尾查看他的JSFiddle示例，了解它将如何工作。

来自GitHub上AngularJS项目的拉取请求#2129：

此外，ng-update-model-debounce 属性将允许在上次触发事件之后延迟实际模型更新。此功能在单选按钮中不可用。

即 ng-update-model-debounce="500" 持续 500 毫秒

遵循下面如何使用去抖动的好方法 

/**
 * uiDebounce service provides a mechanism for creating a wrapper around a function 
 * that ensures that the wrapped function is not called more frequently than a
 * given time interval.
 *
 * @param {!Function} func The function to be wrapped (debounced)
 * @param {number} wait How long between called to func
 * @param {Boolean} immediate If true then the function is invoked on the first call to the
 * wrapper function, otherwise the call will not happen until after the wait time has expired
 * @return {Function} A debounced wrapper around the func function.
 *
 * @example
 * function lookup(id) { ... lookup something ... }
 * var debounceLookup = debounce(lookup, 2000, false);
 * $scope.doLookup = function(msg) {
 *   var promise = debounceLookup(msg);
 *   console.log('called lookup: ', promise);
 *   promise.then(function(value) {
 *     console.log('lookup returned:', value);
 *   });
 * };
 */
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;
    };
  };
});

来源： Github - Angular-UI

我找到了解决方案！

改变：

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

自：

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

在控制器中添加"应用搜索过滤器"功能

    $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);
            }
        });
    }

并为过滤器按钮添加html代码：

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

这行得通！

*

请注意，我在输入中将ng-model="search.*"重命名为ng-model="filters.*"。

相关文章：