如何在离子2应用程序中对点击和查看搜索栏进行编码。在那一个搜索图标只显示第一,当我点击搜索栏将显示搜索图标。如何在离子2应用程序中点击并查看搜索栏
1
A
回答
4
TS
export class Page1{
public toggled: boolean = false;
constructor() {
this.toggled = false;
}
public toggle(): void {
this.toggled = this.toggled ? false : true;
}
}
HTML
<div>
<ion-icon *ngIf="!toggled" (click)="toggle()" name="search"></ion-icon>
<ion-searchbar
*ngIf="toggled"
[(ngModel)]="someValue"
(ionInput)="searchThis($event)"
(ionCancel)="cancelSearch($event)"
(ionClear) = "cancelSearch($event)"
[showCancelButton]="true">
</ion-searchbar>
</div>
在你cancelSearch()
你可以叫this.toggle()
再次显示图标。
2
我觉得@ Ivaro18的答案是完美的。
我只是想补充一下我的例子,根据他的回答建立。
home.ts
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
toggled: boolean;
searchTerm: String = '';
items: string[];
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.toggled = false;
this.initializeItems();
}
ionViewDidLoad() {
console.log('ionViewDidLoad HomePage');
}
toggleSearch() {
this.toggled = this.toggled ? false : true;
}
initializeItems() {
this.items = ['Amsterdam','Bogota','Mumbai','San José','Salvador'];
}
triggerInput(ev: any) {
// Reset items back to all of the items
this.initializeItems();
// set val to the value of the searchbar
let val = ev.target.value;
// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
this.items = this.items.filter((item) => {
return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
}
}
}
home.html的
<ion-header>
<ion-navbar color="primary">
<button *ngIf="!toggled" ion-button icon-only menuToggle><ion-icon name="menu"></ion-icon></button>
<!-- Title -->
<ion-title *ngIf="!toggled">Início</ion-title>
<!-- Search Bar -->
<ion-searchbar *ngIf="toggled" [(ngModel)]="searchTerm" [showCancelButton]="true" (ionCancel)="toggleSearch()" (ionInput)="triggerInput($event)"></ion-searchbar>
<!-- Search Icon -->
<ion-buttons end *ngIf="!toggled">
<button ion-button icon-only (click)="toggleSearch()"><ion-icon name="search"></ion-icon></button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let item of items">
{{ item }}
</ion-item>
</ion-list>
</ion-content>
更多信息: 欲了解更多信息,请查看API docs。
+0
如何在搜索栏上添加焦点并在用户点击搜索图标时打开键盘? –
相关问题
- 1. 我如何使用搜索栏离子
- 2. 如何做在离子2自动完成(搜索栏)
- 3. 使用不使用离子的离子创建离子搜索栏2
- 4. 如何在应用程序中使用搜索栏?
- 5. 滚动tableview并点击搜索器崩溃应用程序
- 6. 如何使用搜索栏在iOS应用程序中搜索网站
- 7. 搜索栏中的应用程序
- 8. HTML搜索栏点击excel
- 9. iOS搜索栏去查看
- 10. 我们如何分离点击并双击WPF应用程序中的listview?
- 11. 无法点击离子搜索图标进行搜索
- 12. 如何在离子2应用程序上设置Admob中介?
- 13. 如何在离子2应用程序中显示carto地图?
- 14. 如何在离子2中正确使用(点击)?
- 15. 如何在导航栏下添加搜索栏并通过点击搜索栏创建一个动作表
- 16. Ionic 2离子搜索栏showCancelButton不能在Android上工作
- 17. 如何在离子中点击图标显示输入栏3
- 18. 单个搜索栏过滤项目在离子2中的多个标签2
- 19. 任务栏搜索应用程序
- 20. Xpages应用程序布局搜索栏
- 21. 搜索查看未响应,当在AppCompat工具栏中单击时
- 22. 使用离子搜索栏通过http.get来过滤离子
- 23. 如何在用户点击搜索栏时显示tableview
- 24. 离子2(角2打字稿) - 无法应用数据查看
- 25. 如何显示搜索栏,并在点击时将其放入导航项中?
- 26. 如何搜索上的点击通过搜查搜索提交
- 27. 如何从我的设备中查看离子应用程序的错误
- 28. Ionic2离子选择与搜索栏
- 29. 如何在winforms应用程序中点击并拖动
- 30. 离子搜索栏作为选项卡组件IONIC 2
好的,谢谢它的工作原理,但有一个小错误,当它运行在ios标题是与搜索栏胶体。 –
要调试,我们需要您的代码 – Ivaro18
HTML' <离子导航栏颜色= “橙色”> <键离子键menuToggle> <离子图标名称= “菜单”> MyOrder <离子按钮结束> <钮离子按钮图标向左* ngIf = “!切换”(点击)= “toggleSearch()”> <离子图标名称= “搜索”> 离子搜索栏> ' –