CODEWITHSUNDEEP
javascriptangularjs
Reacting
Reacting

Reputation: 6123

Angular: 3 different ng-repeat with the same filter, display message when returns nothing (?)

I have an application where I have 3 different ng-repeat but with the same filter, which are ng-repeat="lineItem in lineItems | filter:search" , ng-repeat="line in lineLeague | filter:search" and ng-repeat="lineLeague in lineItem | filter:search" and this is the input <input ng-model="search"/>, now, all I need is that when the user search for something, if the searched returns nothing with any of the params, shows a message, i.e: no lines to show

I will put my code here for you to tell me what is going, which is actually very weird because in another view I had the same case and I resolved it this way, see my Plunker (just type something unrecognizable so you would see my error message).

now, see my angular/html below and tell what I can do in this special case:

<input ng-model="search"/>
  <!--first filter-->
  <div ng-repeat="lineItem in lineItems | filter:search">
    <!--second filter-->
    <div ng-repeat="lineLeague in lineItem | filter:search">>

      <h3 >{{:: lineLeague[0].leagueName}}</h3>

         <table>
          <thead>
            <tr>
               <th>Time</th>
               <th>#</th>
               <th>Team</th>
               <th>Spread</th>
               <th>Total</th>
               <th>Money Line</th>
             </tr>
            </thead>

            <!--third filter-->
            <tbody ng-repeat="line in lineLeague | filter:search">

              <tr>
               <td colspan="6">{{:: line.gameName }}</td>
              </tr>

             </tbody>

          </table>

and this is what I was trying:

<div ng-show="!(lineItems | filter:query).length">No lines to show</div>

my requirements are: as you know there is the same filter but with 3 different ng-repeat so the user has the option to look for... let's say 3 different criteria, what I want is that if the user types something in the search box that is not matching any of the 3 criteria then the message comes up.

Upvotes: 0

Views: 86

Answers (1)

thelifenadine
thelifenadine

Reputation: 26

I tried checking if the length is < 1 instead of using ! and your error message showed. 

<div role="alert" ng-show="(sports | filter:query).length < 1">No sports to show</div>

See here in plunker

Upvotes: 1

Related Questions