Filter records in ionic app

Question

I was looking at the code sample http://codepen.io/ionic/pen/mypxez/

To implement the filter all they are doing is, inside the master.html they have an input box which is bind with 'filter' like this

               <ion-header-bar class="bar-subheader item-input-inset">
            <label class="item-input-wrapper">
              <i class="icon ion-ios7-search placeholder-icon"></i>
              <input type="search" placeholder="Search" ng-model="filter">
            </label>
              </ion-header-bar>

and inside content they are doing something like this

                <ion-content>
              <div class="list">
                <a class="item my-item item-thumbnail-left"
                   collection-repeat="pet in pets | filter:filter"
                   collection-item-height="90"
                   collection-item-width="'100%'"
                   ui-sref="tabs.detail({petsId: pet.id })">
                  <img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
                    <h2>{{pet.firstName}}</h2>
                    <p>{{pet.id}}</p>

                    </a>
                  </div>
                </ion-content>

Q. This works perfectly. My question is, I do not see any other custom filter function defined anywhere in javascript code, How this thing is working ?

Answer 1

If you want a filter in your header bar that will work out of the box without having to wire a bunch of stuff up then check out my plugin. https://github.com/djett41/ionic-filter-bar . This will give you what your looking