Angular 搜索多个输入值
Angular Search multiple input values
我有一个通过 ng-repeat 填充的结果集。现在我需要做一种过滤。我尝试使用 ng-filter 过滤掉搜索结果。
用例:用户可以输入多个 merchantId,每个 逗号分隔 (或任何其他首选机制)。并且填充的结果集对应于用户输入的merchantIds。
当前工作方式:搜索单个 merchantId 时搜索效果很好。
例如,当用户键入 merchantId 时,此列表会列出所有以 merchantId 开头的商家。当输入值为merchantId_1时,结果只与merchantId_1有关。我需要的是应该让用户能够输入 merchantId_1、merchantId_2(每个逗号分隔)和列出结果对应于两个 merchantIds。
使用 Angular 实现此目的的可行方法是什么?
我做了一个 plunker 实现了你的目标。
https://plnkr.co/edit/T9Z6GCFHzwH9xCKxkxJ7?p=preview
HTML:
<input ng-model="searchText" />
<div ng-repeat="merchant in merchants | merchantFilter:searchText">
{{merchant}}
</div>
JS:
angular.module('app', [])
.controller('testController', function($scope) {
$scope.merchants = ['merchant_1', 'merchant_2', 'merchant_3']
})
.filter('merchantFilter', function() {
return function(merchants, searchText) {
// If there's no input, return full list
if (!searchText) return merchants;
// Split and trim the search string
var searchTerms = searchText.split(',');
searchTerms = searchTerms.map(function(term) {
return term.trim();
})
// Filter and return merchants matching any search term
var returnedArray = [];
_.forEach(merchants, function(merchant) {
if (_.find(searchTerms, function(term) {
return merchant.indexOf(term) > -1;
})) {
returnedArray.push(merchant)
}
})
return returnedArray;
}
});
我有一个通过 ng-repeat 填充的结果集。现在我需要做一种过滤。我尝试使用 ng-filter 过滤掉搜索结果。 用例:用户可以输入多个 merchantId,每个 逗号分隔 (或任何其他首选机制)。并且填充的结果集对应于用户输入的merchantIds。 当前工作方式:搜索单个 merchantId 时搜索效果很好。 例如,当用户键入 merchantId 时,此列表会列出所有以 merchantId 开头的商家。当输入值为merchantId_1时,结果只与merchantId_1有关。我需要的是应该让用户能够输入 merchantId_1、merchantId_2(每个逗号分隔)和列出结果对应于两个 merchantIds。
使用 Angular 实现此目的的可行方法是什么?
我做了一个 plunker 实现了你的目标。
https://plnkr.co/edit/T9Z6GCFHzwH9xCKxkxJ7?p=preview
HTML:
<input ng-model="searchText" />
<div ng-repeat="merchant in merchants | merchantFilter:searchText">
{{merchant}}
</div>
JS:
angular.module('app', [])
.controller('testController', function($scope) {
$scope.merchants = ['merchant_1', 'merchant_2', 'merchant_3']
})
.filter('merchantFilter', function() {
return function(merchants, searchText) {
// If there's no input, return full list
if (!searchText) return merchants;
// Split and trim the search string
var searchTerms = searchText.split(',');
searchTerms = searchTerms.map(function(term) {
return term.trim();
})
// Filter and return merchants matching any search term
var returnedArray = [];
_.forEach(merchants, function(merchant) {
if (_.find(searchTerms, function(term) {
return merchant.indexOf(term) > -1;
})) {
returnedArray.push(merchant)
}
})
return returnedArray;
}
});