keep search input at the top of list view in ionic framework

Question

I am new to Ionic Framework, so I am experimenting with it now. On one of my page, I have a search input followed by a list, which looks like this:

When I scroll up, the search field is scrolling up with the list view. Is it possible to keep the search field fixed at the top whilst scrolling?

This is my HTML markup so far:

<ion-view view-title="Force">
  <ion-content>
    <label class="item item-input">
      <i class="icon ion-search placeholder-icon"></i>
      <input type="text" placeholder="Search Force" data-ng-model="searchForce">
    </label>
    <div class="list">
      <ion-item class="item-icon-right" ng-repeat="force in forces | filter:searchForce" type="item-text-wrap" href="#/tab/force/{{force.id}}">
        {{force.name}}
        <i class="icon ion-chevron-right icon-accessory"></i>
      </ion-item>
    </div>
  </ion-content>
</ion-view>

Answer 1

You can use a sub-header for this:

 <ion-header-bar class="bar-light bar-subheader">
      <input type="text" placeholder="Search Force" data-ng-model="searchForce">
      <button ng-if="searchForce.length"
              class="button button-icon ion-android-close input-button"
              ng-click="clearSearch()">
      </button>
</ion-header-bar>

Codepen demo

Also see this post for some alternatives: http://forum.ionicframework.com/t/how-to-make-search-bar-sticky/20721