[英]ngRepeat Filter by deep property
如果我有一个以对象作为属性值的复杂对象,如何按嵌套的属性之一进行过滤?
可以使用OOB ng-repeat过滤器完成此操作吗?
数据
{
Name: 'John Smith',
Manager: {
id: 123,
Name: 'Bill Lumburg'
}
}
ngRepeat
<li ng-repeat="e in emps | filter:Manager.Name">{{ e.Name }}</li>
您需要传递参数以过滤:
<input ng-model="filter.key">
<ul>
<li ng-repeat="e in list | filter: {Manager: {Name: filter.key}}">
{{e.Name}} (Manager: {{e.Manager.Name}})
</li>
</ul>
如果要过滤多个属性,则语法将类似于以下内容。
<ul>
<li ng-repeat="item in list | {filter: top_object_property_name: value, top_object_property_with_nested_objects_name: {nested_object_property_name: value}}">
...
</li>
</ul>
例如:
var employees = [name: 'John', roles: [{roleName: 'Manager'},{roleName: 'Supervisor'}]];
<li ng-repeat="staff in employees | {filter: name: 'John', roles: {roleName: 'Manager'}}">
...
</li>
在最新版本的angularjs中,嵌套obj过滤器默认实现。可以正常使用过滤器。 仅适用于角度1
要使用多个深度属性进行过滤,我们需要创建自定义过滤器。 我的意思是我们需要创建自己的函数来过滤对象中的数据并返回所需的对象(已过滤的对象)。
例如我需要从下面的对象过滤数据-
[
{
"document":{
"documentid":"1",
"documenttitle":"test 1",
"documentdescription":"abcdef"
}
},
{
"document":{
"documentid":"2",
"documenttitle":"dfjhkjhf",
"documentdescription":"dfhjshfjdhsj"
}
}
]
在HTML中,我们使用ng-repeat来显示文档列表-
<div>
//search input textbox
<input ng-model="searchDocument" placeholder="Search">
</div>
<div ng-repeat="document in documentList | filter: filteredDocument">
//our html code
</div>
在Controller中,我们编写过滤器函数以使用对象的两个属性“ documenttitle”和“ documentdescription”返回过滤后的对象,代码示例如下-
function filterDocuments(document)
{
if($scope.searchDocument)
{
if(document.documentTitle.toLowerCase().indexOf($scope.searchDocument.toLowerCase()) !== -1 || document.document.shortDescription.toLowerCase().indexOf($scope.searchDocument.toLowerCase()) !== -1)
{
//returns filtered object
return document
}
}else {
return document;
}
}
其中$ scope.searchDocument是绑定到搜索文本框(HTML输入标签)的范围变量,用户可以在其中输入要搜索的文本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.