How to display only the results of hidden list using angular.js

Question

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.

Answer 1

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