I want to search from large list of data (500+ item) using filter but because of two way data binding of angular the search result appears as I start to type in search key word. But what i want is the data to appear only after I click search button.
Till now I have managed to get the desired result only for the first time I click search button i.e when enter search key word in search input and click search button for the first time the search result appears only after click but after that it starts to appear as I type in search input.
How can I do to make searched result appear only after I click search button?
Here's what I have till now
angular.module('sumitClientApp')
.controller('AboutCtrl', function ($scope) {
$scope.users= [
{name: 'john', 'address': 'tx' },
{name: 'jim ', 'address': ' ms' },
{name: 'roy ', 'address': ' ktm' },
{name: 'hari ', 'address': ' ktm' },// there is more data
]
$scope.search=function(){
$scope.usersToFilter=$scope.users;
$scope.searchReasult=true;
}
});
Html:
<div class="search-box">
<input type="text" ng-model="query">
<div class="search-box-btn">
<span>
<button type="button" ng-click="search()">search
</button></span>
</div>
</div>
<ul class="users" ng-show="searchReasult && query">
<li ng-repeat="user in usersToFilter | filter: query |orderBy:type"
class="thumbnail user-listing">
{{user.name}}
<p>{{user.address}}</p>
</li>
</ul>