如何在 ionic 2 应用程序中单击并查看搜索栏

Question

如何对 ionic 2 应用程序中的点击和查看搜索栏进行编码。在那一个中，搜索图标只显示在第一个，当我点击搜索图标时，搜索栏将显示。

Answer 1

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() 再次显示图标。

Answer 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&iacute;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.

如何在 ionic 2 应用程序中单击并查看搜索栏

how to do click and view search bar in ionic 2 application

ionic2

typescript2.0

angular