Multiple goggle filter options

@RamonArno wrote:

I’m trying to create multiple goggle’s for each option getting the data from a local provider. So far I was able to create a dropdown menu showing the option, once selected and applying the filter I only get the results with the selected option inside. So far, so good. But I would like to select multiple options with toggles, i’m able to display the toggles with the correct names, but they all toggle on and off at the same time…I do am able to filter with 2 items at the same time. Here is some code:

Provider:

• data:

  gerechten = [
    { "id": 1, "name": "name 1", "soort": "pasta"},
    { "id": 2, "name": "name 2", "soort": "pasta1"},
    { "id": 3, "name": "name 3", "soort": "pasta2"},
    { "id": 4, "name": "name 4", "soort": "pasta3"},
    { "id": 5, "name": "name 5", "soort": "pasta1"},
    { "id": 6, "name": "name 6", "soort": "pasta"},
  ]

• code to filter the data:

  query(params?: any) {
    let returnData=this.gerechten;
    if (!params) {
      return returnData;
    }
  
 if(params['soort']!=="" || params['soort2']!==""){
      returnData = returnData.filter((item) => {
        if(params['soort']==item['soort'] || params['soort2']==item['soort']){
          return item;
        }
      });
    }
    return returnData;
  }

The data is filtered page .ts:

export class DataFilterPage {
  filterData={
    ingredienten:"",
    soort:"",
    soort2:""
  }

  soorten=[]
  soortenNew=[]

  constructor(
    public viewCtrl: ViewController,
    public navCtrl: NavController, 
    public navParams: NavParams,
    public gerechtenprovider: GerechtenProvider
  ) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad DataFilterPage');

    this.soorten = this.gerechtenprovider.gerechten.map((item)=>{
      return item.soort;
    })
    this.soortenNew =  Array.from(new Set(this.soorten ));
  }

  dismiss() {
    this.viewCtrl.dismiss(this.filterData);
  }
  cancel(){
    this.viewCtrl.dismiss();
  }

}

and the at least, the html:

<ion-item *ngFor="let soort of soortenNew" [attr.soort]="soort">
        <span item-start class="dot"></span>
      <ion-label>{{soort}}</ion-label>
      <ion-toggle [(ngModel)]="filterData.soort"></ion-toggle>
    </ion-item>

How can I get the result I want, maybe someone can help me with this?

Posts: 1

Participants: 1

Read full topic