1

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>

2 Answers 2

7

You can have two different variables for input and filter:

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.searchQuery = angular.copy($scope.query);
        $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: searchQuery |orderBy:type"
        class="thumbnail user-listing">
        {{user.name}}
        <p>{{user.address}}</p>
    </li>
</ul>
2
  • Yes !! this is working but is it ok if i use this for getting data through backend Jun 23, 2015 at 17:03
  • You cannot use filter when your data is not in client side. What do you mean by use this for getting data through backend? Jun 23, 2015 at 17:05
3

Try this way :

<div class="search-box">
   <input type="text" ng-model="query">
    <div class="search-box-btn">
        <span> 
          <button type="button"  ng-click="searchQuery=query">search
         </button></span>
    </div>
</div>
<ul class="users" ng-show="searchReasult && query">
    <li ng-repeat="user in usersToFilter | filter: searchQuery |orderBy:type"
        class="thumbnail user-listing">
        {{user.name}}
        <p>{{user.address}}</p>
    </li>
</ul>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.