Question

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

代码：

<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){...}

Answer 1

我在帮助同事的过程中遇到了类似的问题（尽管在我们的案例中手动触发的搜索过滤是可取的），并提出了类似但稍微简单的解决方案。

使用原来的重复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>

我希望这有助于某人。

Answer 2

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

按照link一个不错的去抖代码来应用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

Answer 3

我找到了解决方案！

变化：

<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>

将“applySearchFilter”功能添加到控制器

    $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。*”。

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

3 个答案: