如何在離子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()」> <離子圖標名稱= 「搜索」> 離子搜索欄> ' –