Filtern von Arrays in mehreren Definitionslisten mit AngularJS

Question

Ich möchte Daten in einer Datei filtern, die aus 4 Teilen besteht. Mein Code der Probe ist unter (I acordeon Codes und einigen anderen Teilen in meinem Code gelöscht habe)

<input type="text" ng-model="searchText" placeholder="Filter"> 
<dl> 
    <dt ng-repeat-start="mainCategory in mainCategories | filter:searchText" > 
     {{mainCategory.Name}} 
    </dt> 
    <dd ng-repeat-end=""> 
     <dl> 
      <dt ng-repeat-start="subCategory in subCategories[mainCategory.ID] | filter:searchText" > 
       {{subCategory.Name}} 
      </dt> 

      <dd ng-repeat-end=""> 
       <dl> 
        <dt ng-repeat-start="lesson in subCategoryLessons[subCategory.ID] | filter:searchText" > 
         {{lesson.Name}} 
        </dt>     
        <dd ng-repeat-end="">       
         <dl> 

          <dt ng-repeat-start="subLesson in subLessons[lesson.ID] | filter:searchText"> 
           {{subLesson.Header}} 
          </dt> 

          <dd ng-repeat-end=""> 
           {{subLesson.Content}} 
          </dd> 
         </dl> 
        </dd> 
       </dl> 
      </dd> 
     </dl> 
    </dd> 
</dl> 

Unterkategorie, Lektion und SubLesson Daten von einem anderen Dienst kommen und sie in verschiedenen Arrays speichern.

Ich möchte Daten in dieser Ansicht filtern alle Daten enthalten. Aber wenn ich ein Wort in den SubLesson-Teil (die niedrigste Kategorie) schreibe, muss ich Elternteile (HTML-Elemente) sehen, um Sublesson-Daten über das Öffnen von Acordeon zu erreichen.

Kann ich einen Filter wie diesen erstellen? Alle Daten stammen von einem Web-Service mit JSON-Format. Ich muss Ajax-Latenz berücksichtigen.

Answer 1

AFAIK, filter Rohr wird in allen Eigenschaften Ihres Objekts mit einer unendlichen Tiefe suchen.

Daher können Sie den Filter auf die erste Sammlung gelten, mainCategories, in der ersten ng-Repeat, , wenn und nur wenn Sie alle Ihre subCategories in Ihrem mainCategories Objekt enthalten, und so weiter.

Zum Beispiel Ihre Daten werden wie folgt aussehen:

mainCategories = [{ 
    subCategories : [{ 
     lessons : [{ 
      subLessons : [{ 
       ... 
      }] 
      ... 
     }] 
     ... 
    }] 
    ... 
}] 

Und Sie werden es wie folgt verwendet werden:

<dt ng-repeat-start="mainCategory in mainCategories | filter:searchText" > 
     {{mainCategory.Name}} 
    </dt> 
    <dd ng-repeat-end=""> 
     <dl> 
      <dt ng-repeat-start="subCategory in mainCategory.subCategories">