我想使用过滤器从大量数据(500 多个项目)中进行搜索，但是由于 Angular 两种数据绑定(bind)方式，搜索结果会在我开始输入搜索关键字时出现。但我想要的是只有在我点击搜索按钮后才会出现的数据。
直到现在，我第一次点击搜索按钮时才设法获得所需的结果，即当在搜索输入中输入搜索关键字并第一次点击搜索按钮时，搜索结果仅在点击后出现，但之后它当我输入搜索输入时开始出现。
如何让搜索结果只在点击搜索按钮后出现？
这是我目前所拥有的
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>
最佳答案
您可以为输入和过滤器设置两个不同的变量:
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>
关于javascript - 仅在单击 Angular 后才使用过滤器进行搜索，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31008677/