Question

目前，当房地产有限的用户决定在我的应用程序中向下滚动时，他们会收到以下信息：

确实如此，我希望修改What are you looking for?和Current location的标题项：

到目前为止，这是我的代码：

<ion-view view-title="Nearby">
  <ion-content>
    <!-- Search -->
    <div class="list">
      <div class="item item-input-inset" style="border: 0px; padding-bottom: 0px; background-color: #2784c9;">
        <label class="item-input-wrapper">
          <input type="search" placeholder="What are you looking for?" style="width: 100%" ng-model="services" ng-click="showLocations=false; showServices=false">
        </label>    
      <div class="item item-input-inset" style="border-top: 0px; background-color: #2784c9; margin-left: -2px;">
        <label class="item-input-wrapper">
          <input type="search" placeholder="Current location" style="width: 100%" ng-model="location" ng-click="showLocations=true; showServices=true">
        </label>
        <button class="button button-positive button-small" ng-click="location=''; services=''">
          <i class="ion-close"></i>
        </button>
      </div>
    </div>

      <!-- List of services -->
    <div class="list" style="margin-top:-24px">
      <ion-list>
        <ion-item ng-repeat="service in serviceList | filter:services" href="#/app/services/{{service.id}}" class="item-icon-right" ng-hide="showServices">
          {{service.title}}
          <i class="icon ion-chevron-right icon-accessory">
                        <span class="badge badge-positive">{{service.total}}</span>
                    </i>
        </ion-item>
      </ion-list>
    </div>

    <!-- List of regions -->
    <div class="list" style="margin-top:-24px">
      <ion-list>
        <ion-item ng-repeat="location in locationList | filter:location track by $index" href="#/app/locations/{{location.id}}" ng-click="setLocation(location)" class="item-icon-right" ng-show="showLocations">
          {{location.title}}
          <i class="icon ion-chevron-right icon-accessory">
                        <span class="badge badge-positive">{{location.count}}</span>
                    </i>
        </ion-item>
      </ion-list>
    </div>

  </ion-content>
</ion-view>

我还在这里创建了一个CodePen：http://codepen.io/anon/pen/VeQzBv。

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 demo

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

在Angular / Ionic应用程序中保持标题固定滚动

1 个答案: