ngRepeat Filter by deep property
Solution 1
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>
Solution 2
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>
Solution 3
In latest version of angularjs nested obj filter implemented by default.can use filter normally. It for angular 1 only
Solution 4
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 -
<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 -
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.
ExceptionLimeCat
I am a C# & JavaScript developer currently working heavily in Angular.
Updated on July 09, 2022Comments
-
ExceptionLimeCat almost 2 years
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?
Data
{ Name: 'John Smith', Manager: { id: 123, Name: 'Bill Lumburg' } }
ngRepeat
<li ng-repeat="e in emps | filter:Manager.Name">{{ e.Name }}</li>