поиск с использованием фильтра только после щелчка по угловому

Question

Я хочу искать из большого списка данных (500+ элементов) с использованием фильтра, но из-за двусторонней привязки данных углового результата поиска появляется, когда я начинаю вводить ключевое слово поиска. Но я хочу, чтобы данные отображались только после нажатия кнопки поиска.

До сих пор мне удалось получить желаемый результат только в первый раз, когда я нажимаю кнопку поиска, т. Е. Вводя ключевое слово поиска в поисковый ввод и нажав кнопку поиска, когда результат поиска появляется только после щелчка, но после этого он начинает появляться, когда я печатаю вход поиска.

Как сделать, чтобы результат поиска отображался только после нажатия кнопки поиска?

Вот что я до сих пор

 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> 

Answer 1

Вы можете иметь две различные переменные для ввода и фильтра:

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> 

Answer 2

Попробуйте так:

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