2015-04-29 2 views
5

Я новичок в Ionic Framework, поэтому я экспериментирую с ним сейчас. На одной моей страницы, у меня есть вход поиска, за которым следует список, который выглядит следующим образом:сохранить поиск в верхней части списка в ионном каркасе

enter image description here

Когда я прокручивать вверх, поле поиска скроллинг с точки зрения списка. Возможно ли сохранить поле поиска в верхней части страницы во время прокрутки?

Это мой 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> 

ответ

14

Вы можете использовать подзаголовок для этого:

<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

Также см этого поста для некоторых альтернатив: http://forum.ionicframework.com/t/how-to-make-search-bar-sticky/20721

Смежные вопросы