0

I have an specific case where I am repeating my data within an accordion, all I need is to display to the user a message when the filter (search box) returns nothing on ng-repeat="sport in sports"

<input ng-model="query" placeholder="Search sports...">
   <accordion close-others="false">
       <accordion-group ng-repeat="sport in sports | filter:query"
                        ng-show="sport.leagues.length">
         <accordion-heading>
           <div ng-click="addSportToLines(sport);">
              {{::sport.name}}
           </div>
          </accordion-heading>
          <div class="list-group leagues-margin">
           <a href="javascript:void(0);" class="list-group-item"
              ng-repeat="league in sport.leagues"
              ng-class="{active: league.active}"
              ng-click="addLeagueToLines(league)">{{::league.name}}
           </a>
         </div>
       </accordion-group>
     </accordion>
Reacting
  • 5,543
  • 7
  • 35
  • 86

1 Answers1

2

Try this,

<div ng-show="!(sports | filter:query).length">No items</div>

Alternatively, we can eliminate one more filter by assigning the filtered result in another variable like below,

<accordion close-others="false">
       <accordion-group ng-repeat="sport in filteredSports = (sports | filter: query)"
                        ng-show="sport.leagues.length">
         <accordion-heading>
           ...
       </accordion-group>
     </accordion>

<div ng-show="!filteredSports.length">No items</div>

Thanks.

Subash Selvaraj
  • 3,385
  • 1
  • 14
  • 17