CODEWITHSUNDEEP
javascriptangularjsfilteringangularjs-filter
infinitloop
infinitloop

Reputation: 3011

Clearing list after search is performed in Angularjs using filters?

I have just started ng and I must say it is too much fun! I am using example from this site http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/ specifically the 'filter data with angular js'

I followed the example and works fine. The example shows the list and as you type the name it will filter it and show the exact match.

I didn't want to stop there and play with it more, what I want to do is not to show any list initially and as the user types the list is shown. Here is my index.html:

<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
    <input type='text' ng-init='searchText=" "' ng-model='searchText' />
    <ul>
        <li ng-repeat='person in people | filter:searchText'>#{{person.id}} {{person.name}}</li>
    </ul>
</div>

as you can see I am doing ng-init on the searchText variable and this works fine when I initially open the page i.e. there is no list. But as I type a name the list stays there after filtering is done even when I clear the input box. How can I make the list disappear when I clear the input box?

Do I need some sort of custom filter?

please excuse my ignorance with ng if I am using incorrect terms and please tell me the correct ones :)

Upvotes: 0

Views: 1128

Answers (2)

runTarm
runTarm

Reputation: 11547

Just an another idea to achive what you want:

<input type="text" ng-model="searchText" />
<ul>
  <li ng-repeat="person in people | filter:(searchText || ' ')">#{{person.id}} {{person.name}}</li>
</ul>

or if you would like to filter by some default value when the input box is empty:

<li ng-repeat="person in people | filter:(searchText || 'John')">#{{person.id}} {{person.name}}</li>

Upvotes: 1

harishr
harishr

Reputation: 18065

you can use ng-show/ng-hide to show/hide the list based on certain condition, as currently you want it on searchText

    <ul ng-show="searchText !==''">
        <li ng-repeat='person in people | filter:searchText'>#{{person.id}} {{person.name}}</li>
    </ul>

Upvotes: 1

Related Questions