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>

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

2 个答案: