ngRepeat Filter by deep property

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>

Example on Plunker

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>

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.