it-swarm.com.de

wiederholen Sie die Filterung nach tiefen Eigenschaften

Wie kann ich nach einem der verschachtelten Eigenschaften filtern, wenn ich ein komplexes Objekt mit Objekten als Eigenschaftswert habe?

Ist dies mit dem OOB-Wiederholungsfilter möglich?

Daten

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

ngRepeat

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

Sie müssen das Argument übergeben, um zu filtern:

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

Beispiel für Plunker

108
Ray

Wenn Sie mehrere Eigenschaften filtern, würde die Syntax der folgenden ähneln.

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

z.B:

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

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

In der neuesten Version von anglejs ist der verschachtelte obj-Filter, der von default implementiert wurde, normal verwendbar

1
Murali

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

Zum Beispiel muss ich Daten von unterhalb Objekt filtern -

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

In HTML verwenden wir ng-repeat, um die Dokumentliste anzuzeigen.

<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 eine Filterfunktion, um ein gefiltertes Objekt zurückzugeben, indem zwei Eigenschaften des Objekts verwendet werden, nämlich "Dokumenttitel" und "Dokumentbeschreibung". Das Codebeispiel lautet 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 Gültigkeitsbereichsvariable, die an das Textfeld für die Suche (HTML-Eingabe-Tag) gebunden ist, in das der Benutzer den zu durchsuchenden Text eingeben kann.

1