ausblenden ng-Repeat-Elemente, die keine Enkelkinder in zwei verschachtelten ng-Wiederholungen

Question

Sorry für die kryptischen Titel passend, aber es ist ein kryptisches Problem ¯\_(ツ)_/¯

I 3 verschachtelte ng-Wiederholungen haben Google Analytics-Konto zu vertreten Struktur. Es gibt mehrere Konten. Jedes Konto kann mehrere Eigenschaften haben, die mehrere Ansichten haben, also: account -> property -> view. Dies ist der Frontend-Code:

<div class="form-group"> 
    <div class="input-group"> 
     <label>Search for an estate by name or ID</label> 
     <input type="text" class="form-control" ng-model="search" search-box="" /> 
    </div> 
    </div> 
    <div ng-repeat="ac in accounts track by ac.id"> 
    <h5>{{ac.name}} — <code>{{ac.id}}</code> 
     </h5> 
    <div class="well well-sm"> 
     <div ng-repeat="prop in ac.properties track by prop.id" ng-show="filteredViews.length > 0"> 
     <h6> – {{prop.name}} — <code>{{prop.id}}</code> 
      </h6> 
     <ul class="list-group"> 
      <li class="list-group-item" ng-repeat="view in prop.views | viewFilter:search as filteredViews track by view.id"> 
      <label> 
       <input type="checkbox" checklist-model="selectedEstates" checklist-value="view" /> {{view.name}} — <code>{{view.id}}</code> 
      </label> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </div> 

und dieses Bild ist, wie es aussieht, wenn mit einer zufällig generierten Hierarchie gerendert wird. Sie können sehen, dass unter den 2 Konten mehrere Eigenschaften mit Ansichten unter jeder von ihnen vorhanden sind.

Es gibt eine Suchleiste darüber. Die Idee besteht darin, dass der Benutzer in der Lage ist, entweder nach Ansichtsnamen oder nach Ansichts-ID zu suchen. Wenn der Benutzer eingibt, sollten nur die Konten und Eigenschaften mit übereinstimmenden Ansichten bleiben. Der Rest sollte versteckt sein.

Allerdings kann ich mit meiner aktuellen Implementierung nur die Eigenschaften verstecken, die keine übereinstimmenden Kinder haben, nicht die nicht übereinstimmenden Konten. ZB:

Meine Frage ist, wie blende ich die Konten, die nicht passenden Ansichten (Enkelkinder) haben?

Plunker: https://plnkr.co/edit/hvicwa5slPJlpGOfoitn?p=preview

Answer 1

können Sie dies mit einem weiteren Filter für die Eigenschaft erreichen. Hoffe, das Sie

Plunker helfen: https://plnkr.co/edit/EOP3rDT92z2tez4gblsg?p=preview

app.filter('propFilter', function() { 
return function(prop, searchTerm) { 

    var filteredProps = []; 

    for (var k = 0; k < prop.length; k++) { 
    var estates = prop[k].views 
    for (var i = 0; i < estates.length; i++) { 
    var view = estates[i]; 

    if (~view.name.toUpperCase().indexOf(searchTerm.toUpperCase()) || ~view.id.toUpperCase().indexOf(searchTerm.toUpperCase())) { 
     filteredProps.push(prop[k]); 
     break; 
    } 
    } 
    } 

return filteredProps; 
} 

Answer 2

Im Allgemeinen können Sie die ng-if Richtlinie verwenden, um DOM-Elemente auszublenden. ng-if eingefügt in eine DOM-Deklaration wird das DOM anzeigen, wenn der Wert innerhalb ng-if wahr ist und es andernfalls ausblenden.

Sie sollten wahrscheinlich mit ng-if Deklaration überprüfen, ob es "Enkel" gibt.