javascript - 单击 "Apply"按钮后应用 angularjs 过滤器

Question

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

代码:

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

和 Controller :

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>

我希望这对某人有帮助。