仅在单击角度后才使用过滤器搜索

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

试试这个方法：

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

Answer 2

输入和过滤器可以有两个不同的变量：

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>