NgRepeat Filter by deep property

Question

If I have a complex object with objects as property values, how can I filter one of the nested properties?

Can this be done using the Og 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> 

Answer 1

You need to pass an 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> 

Example for Plunker

Answer 2

To filter using a property with several depths, we need to create our own filter. What I mean, we need to create our own function to filter the data in the object and return the desired object (filtered object).

For example, I need to filter data from the object below -

 [ { "document":{ "documentid":"1", "documenttitle":"test 1", "documentdescription":"abcdef" } }, { "document":{ "documentid":"2", "documenttitle":"dfjhkjhf", "documentdescription":"dfhjshfjdhsj" } } ] 

In HTML, we use ng-repeat to display a list of documents -

 <div> //search input textbox <input ng-model="searchDocument" placeholder="Search"> </div> <div ng-repeat="document in documentList | filter: filteredDocument"> //our html code </div> 

In the controller, we write a filter function to return the filtered object using two object properties: "documenttitle" and "documentdescription", an example code 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 an area variable bound to a search text field (HTML input tag) where the user can enter text to search.

Answer 3

If you filter multiple properties, the syntax will 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> 

Answer 4

In the latest version of the default nested obj filter, it is implemented by default. May use the filter normally.