[英]Search filter for angular2 + ionic2
您可以使用Searchbar組件 。 請看看這個工作的矮人 。
它非常易於使用,首先在Component
確保在視圖中顯示要顯示的項目列表。
import { Component } from "@angular/core";
import { NavController } from 'ionic-angular/index';
@Component({
templateUrl:"home.html"
})
export class HomePage {
constructor() {
this.initializeItems();
}
initializeItems() {
this.items = [
'Amsterdam',
'Bogota',
'Buenos Aires',
'Dhaka'
];
}
getItems(ev) {
// 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);
})
}
}
}
就像您可以在該代碼中看到的那樣,神奇的是在這些代碼行中完成了:
// 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);
})
}
因此,每次您鍵入內容時,我們都會過濾出包含您在搜索欄中鍵入的內容的項目。 然后在您的視圖中添加以下代碼:
<ion-header>
<ion-navbar primary>
<ion-title>
Ionic 2
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list>
<ion-item *ngFor="let item of items">
{{ item }}
</ion-item>
</ion-list>
</ion-content>
請注意,我們通過執行以下操作將ion-searchbar
ionInput
元素的ionInput
事件綁定到getItems
方法:
(ionInput)="getItems($event)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.