在离子框架中将搜索输入保留在列表视图的顶部

Question

我是Ionic Framework的新手,所以我现在正在尝试它.在我的一个页面上,我有一个搜索输入后跟一个列表,如下所示:

向上滚动时,搜索字段向上滚动列表视图.滚动时是否可以将搜索字段固定在顶部？

到目前为止,这是我的HTML标记:

<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

您可以使用子标头:

 <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演示

另请参阅此帖子了解一些替代方案:http://forum.ionicframework.com/t/how-to-make-search-bar-sticky/20721