Applying a angularjs filter after "Apply" button click

Question

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

Code:

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

and controller:

app.controller("smsCtrl", ['$scope', 'smsData', 'createDialog', '$http', '$filter', function($scope, smsData, createDialog, $http, $filter){...}

Answer 1

I've encountered something similar while helping a colleague (although the filtering of the search being manually triggered was desirable in our case) and came up with a similar but slightly more simple solution.

Use your original repeating div.

<div ng-repeat="user in users | filter:search">
    ...
</div>

Create an object for storing your user input.

$scope.search = {};
$scope.userInput = {};

Attach your input to this user input object.

<input type="text" ng-model="userInput.name" />
<input type="text" ng-model="userInput.phone" />
<input type="text" ng-model="userInput.city" />

Create a function which loops the properties of the user input object and copies them to your search object.

$scope.applySearch = function() {
    for(prop in $scope.userInput) {
        $scope.search[prop] = $scope.userInput[prop];
    }
};

Finally, create a button to call your search function.

<button ng-click="applySearch()">Search</search>

I hope this helps someone.