离子框架，如何使用popover中的列表进行输入不可滚动？

Question

我在popover模板中有以下代码：

<ion-popover-view class="customPopup">


  <ion-header-bar class="bar bar-header barHeaderCustom">
    <h1 class="title">{{ 'AVAILABLE_SOUNDS' | translate }}</h1>
  </ion-header-bar>

  <ion-tabs class="tabs-icon-only tabs-top tabs-positive">

    <ion-tab title="{{ 'SOUNDS' | translate }}">
      <ion-content class="has-header">
        <!-- SEARCH INPUT-->
        <label class="item item-input">
          <i class="icon ion-search placeholder-icon"></i>
          <input type="text" placeholder="{{ 'SEARCH' | translate }}" ng-model="searchedStringSingleSounds">
        </label>
        <!-- //SEARCH INPUT-->
        <div ng-click="addSoundToSelection({{$index}},'singles')" class="item item-button-right" ng-repeat="sound in availableSounds| filter:searchedStringSingleSounds">
          {{sound.name}}
          <button class="button button-positive" >
            <i class="icon ion-plus-circled"></i>
          </button>
        </div>
        </div>
      </ion-content>
    </ion-tab>

哪个产生以下弹出窗口：

问题是输入是否与listView内容一起滚动，但应该是静态的。我该怎么办？

我试图在文档中找到解决方案，但没有运气。

非常感谢您的任何建议。

Answer 1

将输入移到离子内容之外并将其放在副标题中

<ion-header-bar class="bar bar-header barHeaderCustom">
  <h1 class="title">{{ 'AVAILABLE_SOUNDS' | translate }}</h1>
</ion-header-bar>

<div class="bar bar-subheader item-input-inset">
 <label class="item-input-wrapper">
   <i class="icon ion-search placeholder-icon"></i>
   <input type="text" placeholder="{{ 'SEARCH' | translate }}" ng-model="searchedStringSingleSounds">
 </label>
</div>

然后将has-header has-subheader类添加到离子内容元素

<ion-content class="has-header has-subheader">