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

一尘不染

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

angularjs

我有一个很大的数据列表（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){...}

阅读 202

2020-07-04

共1个答案

一尘不染

我找到了解决方案！

更改：

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

2020-07-04