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

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

我找到了解决方案！

改变：

<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.*" 。