Question

我在互联网上搜索了一些下拉菜单，我发现了精彩的选择下拉菜单，我非常喜欢它，但它内部没有搜索工具。所以我开始为搜索设置文本框，其中包含搜索图标和清除按钮图标以清除文本值。

我的HTML在这里：

<html ng-app="ionicApp">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Multi select</title>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <link href="https://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
  <script src="https://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>
</head>
<body>
  <ion-header-bar class="bar-positive">
    <h1 class="title">Fancy Select</h1>
  </ion-header-bar>
  <ion-nav-view animation="slide-left-right">
  </ion-nav-view>
  <script id="form.html" type="text/ng-template">
    <ion-view>
      <ion-content>
        <fancy-select header-text="Single" allow-empty='false' value="val.single" text="countries_text_single" items="countries">
        </fancy-select>
      </ion-content>
    </ion-view>
  </script>
  <script id="fancy-select.html" type="text/ng-template">
    <ion-list>
      <ion-item class="item-text-wrap" ng-click="showItems($event)">
        {{text}}
        <span class="item-note">
          {{noteText}}
          <img class="{{noteImgClass}}" ng-if="noteImg != ''" src="{{noteImg}}" />
        </span>
      </ion-item>
    </ion-list>
  </script>

  <script id="fancy-select-items.html" type="text/ng-template">
    <ion-view class="fancy-select-items modal">
      <ion-header-bar class="bar-positive" has-subheader="true">
        <button ng-click="hideItems()" class="button button-positive button-icon ion-ios7-arrow-back"></button>
        <h1 class="title">{{headerText}}</h1>
        <button ng-click="validate()" class="button button-positive button-icon ion-checkmark"></button>
      </ion-header-bar>
      <ion-header-bar class="bar-light bar-subheader bar bar-header">
        <label class="item-input">
          <i class="icon ion-search"></i>
          <input type="search" ng-model="search" placeholder="select departure...">
          <button ng-if="search.length" class="customIcon button button-icon ion-android-close input-button" ng-click="$parent.search=''"></button>
        </label>
      </ion-header-bar>
      <ion-content>
        <div class="list">
          <!-- Single select -->
          <label ng-repeat="item in items | filter:search" ng-if="!multiSelect" class="item item-text-wrap" ng-click='validateSingle(item)'>
            <div class="fancy-select-icon" ng-if="item.icon != null">
              <i class="icon-{{item.text}}" style="background-image: url({{item.icon}})"></i>
            </div>
            {{item.text}}
          </label>
        </div>
      </ion-content>
    </ion-view>
  </script>
</body>
</html>

我的codepen代码链接https://codepen.io/milindsaraswala/pen/gbLZza

所以我的问题是

如何使搜索图标变得更大
如何使清除按钮更小和禁用行为。一些鼠标效应
我已经在ng-click上写了明确的功能但是它没有工作

Answer 1

要使清除按钮变小，请在子标题清除图标中添加一个ID并添加此css

#clearIcon:before {
    vertical-align: top;
    font-size: 15px!important;
    line-height: 15px!important;
}

要使搜索图标更大，

.ion-search:before {
    content: "\f21f";
    font-size: 20px !important;
}

要清除搜索框，纳克单击=＆＃34; $ parent.search =＆＃39; ＆＃39; ＆＃34;

角度和离子问题

1 个答案: