ionic 2 응용 프로그램에서 클릭 및보기 검색 막대를 코딩하는 방법. 그 중 하나에서 검색 아이콘이 먼저 표시됩니다. 검색 아이콘을 클릭하면 검색 막대가 표시됩니다.ionic 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
검색 창에 포커스를 추가하고 사용자가 검색 아이콘을 눌렀을 때 키보드를 여는 방법은 무엇입니까? –
감사합니다. 작동하지만, 표제가 검색 창에 콜로이드로 표시되어있을 때 작은 버그가 있습니다. –
는 <= "오렌지"를 이온 메뉴 바 색> 우리는 코드 – Ivaro18
HTML' 이 필요하다는 <버튼 이온 버튼 menuToggle> <이온 아이콘 이름 = "메뉴"> 디버깅하려면 MyOrder <종료 이온 버튼> <버튼 이온 버튼 아이콘 왼쪽 * ngIf =! "전환"(클릭) = "toggleSearch는()"> 을 <이온 아이콘 명 = "검색"> 이온 검색 창> ' –