CBastianelli CBastianelli - 2 months ago 6
AngularJS Question

Hide headers in multiple ng-repeat if no values during filtering

I'm struggling with angularjs! Here's the problem. I've a list of employees from different company to show. Data are like these:

[
{
name : "company1",
employees : [
{ name : "emp1"},
{...}
]
},
{ .. }
]


I show them using two ng-repeat:

<div ng-repeat="company in companies ">
<div class="header">{{company.name}}</div>
<div ng-repeat="employee in company.employees | filter:search">
{{employee.name}}
</div>
</div>


Here we are, I want to avoid, during filtering the headers of company with no employees.

Hope you guys are smarter than me :)

Answer
<div ng-repeat="company in companies ">
<div class="header" ng-show="results.length>0"> {{company.name}}</div>
<div ng-repeat="employee in company.employees | filter:search as results">
     {{employee.name}}
</div>

Explaination: after filtering your filtered data will be stored in ressults , which we can use to decide whether to show company name or not