Angular 和 Ionic 问题

Question

我在 Internet 上搜索了一些下拉菜单，我发现了精美的 select 下拉菜单，我非常喜欢它，但其中没有搜索功能。所以我开始放置用于搜索的文本框，其中有搜索图标和用于清除文本值的清除按钮图标。

我的 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代码link https://codepen.io/milindsaraswala/pen/gbLZza

所以我的问题是

如何让搜索图标变大一些
我怎样才能让按钮变得更小并禁用行为。一些鼠标悬停效果
我在 ng-click 上写了 clear 函数，但它不起作用

Answer 1

要使清除按钮变小，请为子 header 清除图标添加一个 ID，然后添加此 css

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

要使搜索图标变大，

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

要清除搜索框， ng-click=" $parent.search=' ' "

Angular 和 Ionic 问题

Angular and Ionic issue

javascript

css

angularjs

cordova

ionic-framework