我正在尝试使用搜索文本框过滤ng-repeat中的嵌套对象。
给出以下对象:
$scope.items = {
"1": {
name: "First Item",
tag: "first"
},
"2": {
name: "Second Item",
tag: "second"
}
};
我想做这样的事情:
<input type="text" name="serchBox" ng-model="searchByName">
<p ng-repeat="(key, values) in items | filter:{name: searchByName}">
Using both {{key}} and {{values.name}}
</p>
这确实不起作用。我尝试了很多东西,但我无法使其正常工作。 我不想改变我的目标。我经常搜索,但我找不到符合我需要的东西。
答案 0 :(得分:5)
我终于得到了自己问题的答案。
我只需要创建自己的过滤器,并使用正则表达式检查对象内的属性是否具有所需的值:
app.filter('customSearchFilter', function() {
return function(input, term) {
var regex = new RegExp(term || '', 'i');
var obj = {};
angular.forEach(input, function(v, i){
if(regex.test(v.name + '')){
obj[i]=v;
}
});
return obj;
};
});
以这种方式将其应用于HTML:
<input type="text" ng-model="searchName" />
<ul>
<li ng-repeat="(key, val) in items | customSearchFilter:searchName">Both {{key}} and {{val.name}}</li>
</ul>
我创建了此Plunker以显示我的解决方案
答案 1 :(得分:0)
如果您不需要在其他地方重复使用过滤器,则可以在控制器中编写过滤功能。
scope.customSearchFilter = function(term){
return function(item) {
var regex = new RegExp(term || '', 'i');
return regex.test(item.name + '');
};
};
过滤器参数是单个项目,而不是数组。
以下是示例。第一个变体是模型,第二个是普通范围: