Check out this JSON code example:
$scope.info = [{"name":"Category1", "data":[{"name":"Item1"}, {"name":"Item2"}]},
{"name":"Category2", "data":[{"name":"Item3"}, {"name":"Item4"}]}];
I have utilized ng-repeat to display the list and a search box to filter, as well sorting the results by categories :
<div ng-repeat="Cat in info">
<h3>{{Cat.name}}</h3>
<ul>
<li ng-repeat="Item in Cat.data | filter:search" >
{{Item.name}}
</li>
</ul>
</div>
An issue arises when searching for an item like "Item3", it displays under Category2 but Category1 remains visible even if empty because only the content is being filtered, not the categories themselves.
To address this, how do I instruct AngularJS to hide a category if its filtered content is empty?