角度和离子问题
Posted
技术标签:
【中文标题】角度和离子问题【英文标题】：Angular and Ionic issue 【发布时间】：2015-03-03 18:56:08 【问题描述】：我在互联网上搜索了一些下拉列表，我发现了精美的选择下拉列表，我非常喜欢它，但其中没有搜索功能。所以我开始放置带有搜索图标和清除按钮图标的搜索文本框来清除文本值。
我的 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 上写了 clear 函数，但它不起作用
【问题讨论】：
【参考方案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;
要清除搜索框， ng-click=" $parent.search=' ' "
【讨论】：
ion-search css 工作正常，但是当您放置按钮 css 时，我的顶部标题图标也变小了。我只需要小标题图标 为您的子标题图标添加一个 id 并尝试相同的代码 我已经这样做了，它可以工作，但是清除文本框呢 使用 ng-click=" $parent.search=' ' "以上是关于角度和离子问题的主要内容，如果未能解决你的问题，请参考以下文章