Question

我遇到了在＆＃34;搜索＆＃34;下添加搜索栏的问题。我项目的标签。我对this的布局方式使用了类似的逻辑，但它在ionic serve --lab实时浏览器预览中无法正常工作。搜索栏最终不够宽，并且在列表的中间位置，它意味着要过滤。

当我将搜索栏的代码直接放在html文件中的<ion-view>标记之外时，它不会显示出来。当我将它直接放在<ion-content>标记内时，它看起来是错误的。关于我如何实现这个的任何提示？

以下是我正在使用的搜索栏的代码：

<ion-header-bar class="bar-light bar-subheader">
    <input type="search" placeholder="Filter contacts..." ng-model="search" ng-focus="searchFocused = true" ng-blur="searchFocused = false" ng-change="scrollTop()" class="full-width">
    <button ng-if="search.length" class="button button-icon ion-android-close input-button" ng-click="clearSearch()">
      </button>
  </ion-header-bar>

Answer 1

如果您将bar课程设为sub-header，则您的搜索栏问题应该得到解决。结帐这里 -

＆＃13;

angular.module('myApp', ['ionic'])
.controller('MainCtrl', function($scope) {
  $scope.clearSearch = function() {
    $scope.search = '';
  };
});

＆＃13;

.button.button-icon.input-button {
  position: absolute;
  right: 0;
  top: 5px;
  color: #bbb;
}

.item img {
  height: 60px;
  width: 60px;
  float: left;
  margin-top: 20px;
  margin-right: 10px;
}

.my-item.item {
  padding-top: 0;
  padding-bottom: 0;
}

.full-width {
  width: 100%;
}

＆＃13;

<script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.js"></script>
<link href="http://code.ionicframework.com/1.1.0/css/ionic.css" rel="stylesheet"/>

<body ng-app="myApp" ng-controller="MainCtrl">
  <ion-header-bar class="bar-positive">
    <h1 class="title">Header</h1>
  </ion-header-bar>
  <ion-header-bar class="bar bar-subheader">
    <input type="search"
           placeholder="Filter contacts..."
           ng-model="search"
           ng-focus="searchFocused = true"
           ng-blur="searchFocused = false"
           ng-change="scrollTop()"
           class="full-width">
    <button ng-if="search.length"
            class="button button-icon ion-android-close input-button"
            ng-click="clearSearch()">
    </button>
  </ion-header-bar>
  <ion-content>
    <ion-list>
      <ion-item class="my-item">item 1</ion-item>
      <ion-item class="my-item">item 2</ion-item>
      <ion-item class="my-item">item 3</ion-item>
      <ion-item class="my-item">item 4</ion-item>
    </ion-list>
  </ion-content>
</body>

＆＃13;

在Ionic的选项卡下实现搜索栏

1 个答案: