如何在ionic 2应用程序中编写点击和查看搜索栏。在其中,搜索图标只在第一个显示,当我单击搜索图标时,搜索栏将显示。
发布于 2016-11-30 18:26:00
ts
export class Page1{
public toggled: boolean = false;
constructor() {
this.toggled = false;
}
public toggle(): void {
this.toggled = !this.toggled;
}
}
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()
来再次显示该图标。
发布于 2017-01-28 22:56:16
我认为@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。
https://stackoverflow.com/questions/40881868
复制相似问题