javascriptangularjsangularjs-ng-repeatng-hideangularjs-ng-show

Hide parent block when child element is not present while searching in searchbox

How do I hide the parent element when a child element is not present while searching in the search box. Here is my code:

<div class="col-md-6" ng-repeat="round in displaymatch.allrounds>
 <h3>Round: {{round.name}}</h3>
<div ng-repeat="teamname in round.matches | filter:namesearch">
        <b>Match Date:</b> {{teamname.date}} 
    <a ng-href="#!/15/{{teamname.date}}/{{teamname.team1.code}}/{{teamname.team2.code}}">{{teamname.team1.name}} <strong>V/S</strong>
    {{teamname.team2.name}}</a>
</div>

Normal searching of element is working but searching for the keywords which are not present should hide the main blocks(Rounds) also.

Normal functionality: enter image description here

Here is where I'm facing the issue: enter image description here

Solution

  • Use ng-show to show the heading only if there are >0 matches after filtering:

    <div class="col-md-6" ng-repeat="round in displaymatch.allrounds>
<h3 ng-show="(round.matches | filter:namesearch).length > 0">Round: {{round.name}}</h3>
<div ng-repeat="teamname in round.matches | filter:namesearch">
        <b>Match Date:</b> {{teamname.date}} 
    <a ng-href="#!/15/{{teamname.date}}/{{teamname.team1.code}}/{{teamname.team2.code}}">{{teamname.team1.name}} <strong>V/S</strong>
    {{teamname.team2.name}}</a>
</div>

    Similar to this answer.