Ion-select with "select all" option


#1

Hi,
I am new to Ionic2 .
I am trying following code

<ion-item>
  <ion-label>Toppings</ion-label>
  <ion-select [(ngModel)]="toppings" multiple="true">
    <ion-option>Bacon</ion-option>
    <ion-option>Black Olives</ion-option>
    <ion-option>Extra Cheese</ion-option>
    <ion-option>Mushrooms</ion-option>
    <ion-option>Pepperoni</ion-option>
    <ion-option>Sausage</ion-option>
  </ion-select>
</ion-item>

I want one option for “select all”. how can I implement that?

Thanks


#2

You can controll js.

in html template.

  <ion-item>
    <ion-label>Toppings</ion-label>
    <ion-select [(ngModel)]="toppings" multiple="true">
      <ion-option>Bacon</ion-option>
      <ion-option>Black Olives</ion-option>
      <ion-option>Extra Cheese</ion-option>
      <ion-option>Mushrooms</ion-option>
      <ion-option>Pepperoni</ion-option>
      <ion-option>Sausage</ion-option>
    </ion-select>
  </ion-item>
  <button (click)="read();">select all</button>

in ts.

  private toppings;

  read(){
    this.toppings = ["Bacon", "Black Olives", "Extra Cheese", "Mushrooms", "Pepperoni", "Sausage"];
    console.log(this.toppings);
  }

When you click button ‘select all’, variable ‘toppings’ set all options.

Regards.


Show Checkbox Alert with "All Items" Option
#3

Thanks for your reply. that helped.


#4

That’s a cool, simple solution, rdlabo. But really, the “All” button should appear as the top option in the selection list. When you click it, all options become selected, when you click it again, all options are de-selected. (Or maybe just put in small “All” and “None” buttons.) It would be nice to have this functionality built in automatically, maybe optionally, when multiple=“true”.


#5

Can I selected all option in my ion-select?

this is my code

  <ion-item>
    <ion-label>Categories</ion-label>
    <ion-select [(ngModel)]="categories" multiple="true">
      <ion-option *ngFor="let item of categoriesitems" value="{{item.id}}">{{item.name}}</ion-option>
    </ion-select>
  </ion-item>

there is the possibility to insert a option with select all values?

Thank You


#6

I tried doing this:

<ion-item>
  <ion-label>Categories</ion-label>
  <ion-select [(ngModel)]="categories" multiple="true">
    <ion-option (ionSelect)="allClicked()">select/deselect all</option>
    <ion-option *ngFor="let item of categoriesitems" value="{{item.id}}">{{item.name}}</ion-option>
  </ion-select>

It renders the all option but the allClicked() event triggers only when setting the option, and not when you toggle it off. In addition, when I get into the allClicked() handler, there doesn’t seem to be a way to control the selection of the rest of the options.


Select multiple - check all
#7

Thank you for your time.

Now I create the button

<ion-item>
  <ion-label>Categories</ion-label>
  <ion-select [(ngModel)]="categories" multiple="true">
    <ion-option (ionSelect)="allClickedCategories()">Select/Deselect All</ion-option>
    <ion-option *ngFor="let item of categoriesitems" value="{{item.name}}">{{item.name}}</ion-option>
  </ion-select>
</ion-item>

and this is my function in ts

  allClickedCategories() {
    this.categories = [];
    for (var i = 0; i < this.categoriesitems.length; i++) {
      this.categories.push(this.categoriesitems[i].name)
    }
  }

but when i click on this button the flag near the option don’t show but this options are in array and when i click again on the select i show the flag.

There is an option to refresh the select or a method that does this?

FIRST CLICK:

SECOND CLICK:

Thank You!


Select/deselect all options in a dynamically created ion-select
#8

Hi, have you found your solution yet? I am facing the exact same problem as you are.


#9

Hi @filippodicostanzo , have you found your solution yet? i am also face out same problems


#10

Hey, any solution on this? The (ionSelect) event is only triggered on selecting but not deselecting the option.


#11

Not exactly a solution, but here’s what you can do :

  this.sectionSelect.close().then(() => this.sectionSelect.open())

since open and close is a promise
close and open the select dialog.