两列同时搜索的角滤波表
两列同时搜索的角滤波表
提问于 2018-07-13 03:41:43
我有一个包含多个列的表，我目前使用一个文本输入(搜索)字段来筛选这些列：
(简化)：
<div class="search">
<input type="text" placeholder="Search" data-ng-model="vm.filter_on" />
</div>
<tr data-ng-repeat="product in vm.data | filter: vm.filter_on>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.brand}}</td>
</tr>假设我有这三种产品：
{
id: 1,
name: "Waffles",
brand: "Walmart",
},
{
name: "Pizza",
brand: "Walmart",
},
{
name: "Soda",
brand: "Target",
}如果我在搜索栏中输入"Walmart“，我将看到前两个对象。我想知道的是，是否有可能搜索“沃尔玛piz”，只显示第二个对象--本质上，搜索词试图与多列的值匹配。
在寻找解决方案时，我发现的大部分内容都是试图设置搜索将考虑的特定列，但我还没有找到任何解决我的确切用例的方法。
我使用这个问题创建了一个解决方案，它解决了使用多个片段(而不是完整术语)进行搜索的问题：AngularJS filter for multiple strings
但即便如此，我仍然需要将列数据组合成一个字符串，以便搜索工作。有什么办法能更优雅地在角度上这样做吗？
回答 1
Stack Overflow用户
发布于 2018-07-13 07:17:29
您应该创建custom过滤器：
angular.module('app', []).controller('ctrl', function($scope) {
var vm = this;
vm.filter_on = "Walmart piz";
vm.data = [
{ id: 1, name: "Waffles", brand: "Walmart" },
{ name: "Pizza", brand: "Walmart" },
{ name: "Soda", brand: "Target" }
]
}).filter('custom', function(){
return function(input, search){
if(!search)
return input;
var items = search.split(' ').filter(x => x).map(x => x.toLowerCase());
return input.filter(x => {
for(var item of items){
var flag = false;
for(var prop in x){
if(prop != '$$hashKey' && (x[prop] + '').toLowerCase().indexOf(item) != -1){
flag = true;
break;
}
}
if(!flag)
return false;
}
return true;
})
}
})table, th, td {
border: 1px solid black;
border-collapse: collapse;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<div class="search" ng-app='app' ng-controller='ctrl as vm'>
<input type="text" placeholder="Search" ng-model="vm.filter_on" />
<br>
<br>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>brand</th>
<tr>
</thead>
<tbody>
<tr data-ng-repeat="product in vm.data | custom: vm.filter_on">
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.brand}}</td>
</tr>
</tbody>
</table>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51317316
复制相关文章
相似问题
腾讯云开发者
