在“应用”之后应用angularjs过滤器按钮单击 [英] Applying a angularjs filter after "Apply" button click

问题描述

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

I have a big list of data (4000+ items). When start typing - my browser freezes (up to 15 sec). So i need to turn off auto-filter feature, and bind filter function to the button click. Looking for answer via Google gave no results. How i can do this? Help me please :)

代码：

<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 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函数添加到控制器

Add "applySearchFilter" function to 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);
            }
        });
    }

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

And add html code for filter button:

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

这样可行！

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

这篇关于在“应用”之后应用angularjs过滤器按钮单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！