角度单击后使用过滤器进行搜索

我想使用过滤器从大量数据列表（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>

来源

2015-06-23 CodeBlooded

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

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>

来源

2015-06-23 16:50:38 alisabzevari

是！这是工作，但它是好的，如果我用这个通过后端获取数据 – CodeBlooded

当你的数据不在客户端时，你不能使用过滤器。通过使用它来通过后端获取数据，你的意思是什么？ – alisabzevari

好吧，我知道了谢谢你:) – CodeBlooded

试试这个方法：

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

来源

2015-06-23 17:02:56 Alexandre

角度单击后使用过滤器进行搜索

回答

相关问题