角度和离子问题

Angular and Ionic issue

本文关键字：问题      更新时间：2023-09-26

我在互联网上搜索一些下拉菜单，我发现了花哨的选择下拉菜单，我非常喜欢它，但它没有搜索功能。所以我开始放置文本框进行搜索，其中包含搜索图标和清除按钮图标以清除文本值。

我的 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>

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

所以我的问题是

  1. 如何使搜索图标更大
  2. 我怎样才能使清晰的按钮一些更小并禁用行为。一些鼠标悬停效果
  3. 我已经在ng-click上写了清晰的功能，但它不起作用

要使清晰的按钮变小，请在子标题清除图标中添加一个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=' ' "

相关文章：