이온 2 - 이온 목록에 필터 적용

Question

사용자가 적용 할 수있는 일부 필터를 기반으로 배열 또는 이온 목록 필터링에 대한 질문이 있습니다. 당신은 나에게 그것을 할 수있는 방법을 머리를 주 시겠습니까이 달성하는 가장 좋은 방법은 무엇입니까? Amazon에서 제공하는 것과 유사한 기능을 원합니다. 아래 스크린 샷을 참조하십시오. 고맙습니다.

Answer 1

첫째로 당신은 추가 할 것 popover (이온 2의 또 다른 페이지이다). 이 페이지에서 필터링 할 항목을 만들 수 있습니다.

페이지 사이의 통신, 필터링 할 항목으로 필터링 할 범주의 팝 오버 페이지에 대한 페이지가 이온 2의 navParams 컨트롤러 및/또는 팝 오버 컨트롤러의 onDidDissmis 호출로 수행됩니다

당신이 openPopover()을 클릭하면

항목 페이지

import { Component } from '@angular/core'; 
import { NavController, NavParams, PopoverController } from 'ionic-angular'; 
import { FilterItemsPage } from '../../config/config.pages'; 

@Component({ 
    selector: 'items-page', 
    templateUrl: 'items-page.html' 
}) 
export class ItemsPage { 

     filteredItems:any; 

     constructor(public navCtrl: NavController, public navParams: NavParams, 
      public popoverCtrl:PopoverController) {} 

     openPopover(){ 
      let popover = this.popoverCtrl.create(FilterItemsPage); 
      popover.onDidDismiss(data => { 
       this.filteredItems = data 
      }); 
      popover.present(); 
     } 
} 

그래서 그 다음 사용자가 필터링 기준으로 항목을 선택할 수있는 팝 오버에서 페이지 FilterItemPage가 열립니다. 선택한 필터 항목을 클릭하면 주요 항목 페이지로 다시 전달되어야하며, 이는 팝업에 대해 onDidDissmiss에 전달됩니다. 당신은 popover 페이지로 선정되었다 (지금 filteredItems에서 개최) 항목을 전달하여 해당 항목을 누른 상태에서 navParams에서 그들을 수집 할 수 있습니다 - 팝 오버 페이지에서 지금

// Passing items that have already been added 
let popover = this.popoverCtrl.create(FilterItemsPage,this.filteredItems); 

이하 (FilterItemsPage)를 참조하십시오

import { Component } from '@angular/core'; 
import { NavController, NavParams, ViewController } from 'ionic-angular'; 
import { ItemsPage } from '../../config/config.pages'; 

@Component({ 
    selector: 'filter-items-page', 
    templateUrl: 'filter-items-page.html' 
}) 
export class FilterItemsPage { 

    PassedFilteredItems:any; 
    itemsToFilterBy:any; 

     constructor(public navCtrl: NavController, public navParams: NavParams, 
     public viewCtrl: ViewController) { 
     this.PassedFilteredItems = this.navParams.data; 
     console.log('Items Page:', this.PassedFilteredItems); 
     } 

     openPopover(){ 
      let popover = this.popoverCtrl.create(FilterItemsPage); 
      popover.onDidDismiss(data => { 
       this.filteredItems = data 
      }); 
      popover.present(); 
     } 

     onSelectFilterOrSaveFilteredCollection(){ 

      // Get selected items from a form (of model) 
      // See angular reactive forms 
      // https://angular.io/docs/ts/latest/guide/reactive-forms.html 

      // Pass items on dismiss 
      // will be passed into onDidDismiss 
      this.viewCtrl.dismiss(itemsToFilterBy); 

     } 
}