ngRepeat Filter nach Deep-Eigenschaft

Question

Wenn ich ein komplexes Objekt mit Objekten als Eigenschaftswerte habe, wie kann ich nach einer der verschachtelten Eigenschaften filtern?

Kann dies mit dem OOB ng-repeat Filter gemacht werden?

Daten

{ 
    Name: 'John Smith', 
    Manager: { 
    id: 123, 
    Name: 'Bill Lumburg' 
    } 
} 

ngRepeat

<li ng-repeat="e in emps | filter:Manager.Name">{{ e.Name }}</li> 

Answer 1

Sie müssen in dem Argument übergeben filtern nach:

<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

Answer 2

In der neuesten Version von angularjs verschachtelter Obj-Filter standardmäßig implementiert.können Filter normal verwenden.

Answer 3

Um mit mehreren tiefen Eigenschaften zu filtern, müssen wir benutzerdefinierte Filter erstellen. Was ich meine, müssen wir eine eigene Funktion erstellen, um die Daten in Objekt zu filtern und das erforderliche Objekt (gefiltertes Objekt) zurückzugeben.

Zum Beispiel muss ich zum Filtern von Daten von unten Objekt -

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

In HTML wir ng-Wiederholung zeigen Dokumentenliste verwenden -

<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 schreiben wir Filterfunktion zurückzukehren gefiltertes Objekt unter Verwendung von zwei Eigenschaften des Objekts, die "Dokumenttitel" und "Dokumentbeschreibung" sind, ist das Codebeispiel wie folgt:

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; 
      } 
     } 

Dabei ist $ scope.searchDocument die Bereichsvariable, die an das Such-Textfeld gebunden ist (HTML-Eingabe-Tag), in das der Benutzer den zu suchenden Text eingeben kann.

Answer 4

Wenn Sie mehrere Eigenschaften filtern, ist die Syntax ähnlich wie unten.

<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> 

zB:

 var employees = [name: 'John', roles: [{roleName: 'Manager'},{roleName: 'Supervisor'}]]; 

     <li ng-repeat="staff in employees | {filter: name: 'John', roles: {roleName: 'Manager'}}"> 
       ... 
     </li>