Javascript ngRepeat 按深度属性过滤
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27606595/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ngRepeat Filter by deep property
提问by ExceptionLimeCat
If I have a complex object with objects as property values, how can I filter by one of the nested properties?
如果我有一个以对象作为属性值的复杂对象，我如何按嵌套属性之一进行过滤？
Can this be done with the OOB ng-repeat filter?
这可以用 OOB ng-repeat 过滤器完成吗？
Data
数据
{
Name: 'John Smith',
Manager: {
id: 123,
Name: 'Bill Lumburg'
}
}
ngRepeat
重复
<li ng-repeat="e in emps | filter:Manager.Name">{{ e.Name }}</li>
回答by Ray
You need to pass in the argument to filter by:
您需要传入参数以过滤：
<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>
回答by Rob
If you are filtering multiple properties then the syntax would be similar to below.
如果您要过滤多个属性，则语法将类似于以下内容。
<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>
eg:
例如：
var employees = [name: 'John', roles: [{roleName: 'Manager'},{roleName: 'Supervisor'}]];
<li ng-repeat="staff in employees | {filter: name: 'John', roles: {roleName: 'Manager'}}">
...
</li>
回答by Murali
In latest version of angularjs nested obj filter implemented by default.can use filter normally. It for angular 1 only
在最新版本的angularjs嵌套obj过滤器中默认实现。可以正常使用过滤器。它仅适用于角度 1
回答by Ravindra Vairagi
To filter with multiple deep property we need to create custom filter. What i mean we need to create our own function to filter the data in object and return the required object(filtered object).
要使用多个深度属性进行过滤，我们需要创建自定义过滤器。我的意思是我们需要创建自己的函数来过滤对象中的数据并返回所需的对象（过滤对象）。
For example i need to filter data from below object -
例如，我需要从下面的对象过滤数据 -
[
{
"document":{
"documentid":"1",
"documenttitle":"test 1",
"documentdescription":"abcdef"
}
},
{
"document":{
"documentid":"2",
"documenttitle":"dfjhkjhf",
"documentdescription":"dfhjshfjdhsj"
}
}
]
In HTML we use ng-repeat to show document list -
在 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>
In Controller we write filter function to return filtered object by using two properties of object which are "documenttitle" and "documentdescription", code example is as below -
在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;
}
}
Where $scope.searchDocument is the scope variable which binded to the search textbox (HTML input tag) in which user can input the text to search.
其中 $scope.searchDocument 是绑定到搜索文本框（HTML 输入标签）的范围变量，用户可以在其中输入要搜索的文本。
