Question

我有一个关于根据用户可以应用的一些过滤器过滤数组或离子列表的问题。能否请您告诉我如何做到这一点以及实现这一目标的最佳方法是什么？我想要一个亚马逊提供的类似功能。看下面的截图。谢谢。

Answer 1

首先，您需要添加popover（这只是离子2中的另一页）。在此页面中，您可以创建要过滤的项目。

页面之间的通信，您要过滤的项目的页面以及要过滤的类别的弹出页面将由离子2的navParams控制器和/或onDidDissmis完成在弹出控制器中调用

项目页面

 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();
       }
}

因此，当您点击openPopover()时，它会在弹出窗口中打开您的页面FilterItemPage，然后用户可以选择要过滤的项目。然后，选中的过滤器项目需要在单击时传递回主项目页面，这将在onDidDissmiss中传递给弹出窗口。您可以通过将已选择的项目（现在保存在filteredItems中）传递到popover页面来保存这些项目，并在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);

      }
}

离子2 - 在离子列表上应用过滤器

1 个答案: