在AngularJS中,可以使用自定义过滤器来搜索多个值。以下是一个示例,演示如何在一个字段中搜索多个值:
HTML代码:
- {{item.name}}
JavaScript代码:
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.items = [
{ name: 'Apple' },
{ name: 'Banana' },
{ name: 'Orange' },
{ name: 'Grapes' }
];
})
.filter('searchFilter', function() {
return function(items, searchText) {
if (!searchText) {
return items;
}
return items.filter(function(item) {
var keywords = searchText.toLowerCase().split(' ');
for (var i = 0; i < keywords.length; i++) {
if (item.name.toLowerCase().indexOf(keywords[i]) !== -1) {
return true;
}
}
return false;
});
};
});
在此示例中,我们创建了一个名为searchFilter
的自定义过滤器。该过滤器接受一个items
数组和searchText
作为参数。它将搜索文本转换为小写,并使用空格分割成关键字数组。
然后,我们使用filter
方法对items
数组进行过滤。我们遍历关键字数组,对每个关键字执行搜索,并返回包含任何一个关键字的项目。
最后,我们将过滤后的结果绑定到ng-repeat
指令中,以显示过滤后的结果。