1

I'm new to Angular.js and have a bit of a problem.

I have a list that is searchable by a local scope variable. However, I DO NOT want to display the list which by default is displayed just below the input field. I only want to display results of the query. How can I achieve this?

Currently I have:

<form class="form-inline">
  <input ng-model="query" type="text" placeholder="Filter by" autofocus>
</form>

<ul ng-repeat="friend in friends | filter:query | orderBy: 'name' ">
  <li ng-show="friend">{{friend.name}}</li>
</ul>

Using "ng-hide" successfully hides the list from the view, but I can't figure out how to then display the results of the query. :(

Any tips here would be useful. You can check out my fiddle: testing queries.

Mike Grant
  • 83
  • 7

1 Answers1

4

You can add ng-show="query" to the <ul> that will only display results if query is not false.

The ng-show="friend" on the <li> is unnecessary.

<ul 
    ng-show="query" 
    ng-repeat="friend in friends | filter:query | orderBy: 'name'"
>
    <li>{{friend.name}}</li>
</ul>

JSFiddle

David Barker
  • 14,484
  • 3
  • 48
  • 77
  • 1
    Yep! That settles it. Geez, I thought I tried something similar, but so glad to have a quick answer in so little time. Thanks @david! – Mike Grant Feb 05 '15 at 23:15