Apologies for the enigmatic title, but the issue at hand is quite cryptic ¯\_(ツ)_/¯
I'm dealing with a complex problem involving 3 nested ng-repeats to display Google Analytics' account structure. Within this structure are multiple accounts, each containing various properties and views linked in a hierarchy:
account -> property -> view <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>
Accompanying this code is a visual representation depicting a randomly generated hierarchy of accounts, properties, and views.
A search bar sits above this structure, allowing users to search by view name or ID. The goal is to display only accounts and properties that contain matching views upon user input.
However, my current implementation hides unmatched properties but not entire accounts. This results in inconsistencies like the following:
My question revolves around how to efficiently hide accounts lacking matching views (grandchildren).
PLUNKER: https://plnkr.co/edit/hvicwa5slPJlpGOfoitn?p=preview