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
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.
Thanks for your reply. that helped.
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”.
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
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.
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!
Hi, have you found your solution yet? I am facing the exact same problem as you are.
Hi @filippodicostanzo , have you found your solution yet? i am also face out same problems
Hey, any solution on this? The (ionSelect) event is only triggered on selecting but not deselecting the option.
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.
hi for Deselect Just add;
.ts file
read21(){
this.toppings = [" "];
console.log(this.toppings);
}
.html
<button (click)=“read21();” >Deselect all
tq.
Hey did you find a solution to this?
create select/deselect all options in a dynamically create ion-select yaa good but how possible in api
then how must be possible
Anybody get this working for Ionic 3? I tried adding my own check box to the list, no go. Instead of ionSelect to use a click even and see if people have turned it on or off. No go.
Any idea?
(Really I wish I could add another button to the bottom for Select All but that doesn’t seem to work either).
You make things challenging when necromancing a very muddy thread asking about something as vague as “this”. IMHO, the attempt to shoehorn a “select all” option into the <ion-select> itself is misguided, as it introduces a category error - making one of the options in an option menu not really be an option at all. I would definitely make any attempt at “select all” functionality live outside of the select, perhaps as a checkbox or toggle.
So what exactly are you trying to achieve, what code do you have to attempt it, and what exactly is the disconnect between those two things?
Trying to get some Select All (and or Deselect All) working with ion-select.
The ideal way would be have some button outside the list but in the popup. Ok, Cancel, Select All. This does not seem doable. Ionic only allows for the two buttons as far as I can see.
Next option is what is being tried here, adding some option to the list.
Doing how it was implement here
<ion-option (ionSelect)="allClickedCategories()">Select/Deselect All</ion-option>
I get the same results.
1- ionSelect only fires when the user clicks it, not when they un-checked it.
2. It seems like when the list items are generated they are static and can’t be updated on the fly.
What I’m seeing — List of Items have values unchecked, open up select list with items un-checked. Click the select all, code runs to put items in the check state but screen does not reflect this. user can click cancel and the items are now checked.
Last options I’m trying is just using a normal check box.
<ion-option>
<ion-item>
<ion-label>Hi all</ion-label>
<ion-checkbox type="checkbox" (click)="selectAll($event)" [(ngModel)]="selectAllCheck"
name="selectAll">
</ion-checkbox>
</ion-item>
</ion-option>
The check box shows up correctly. I click the check box but the selectAll code is never called. Debugging more in a browser I can follow the click event listener is firing. (Code in tap-Click.js is hit). But again never reaches selectAll.
I think even I got this problem fixed, I would still have problem #2 above.
Well, here’s what I would do:
export class HomePage {
fruits = ["apple", "banana", "cherry"];
basket = [];
allSelected = false;
onBasketChange(evt: CustomEvent<SelectChangeEventDetail>): void {
this.basket = evt.detail.value;
this.allSelected = isEqual(this.basket, this.fruits);
}
toggleSelectAll(): void {
if (this.allSelected) {
this.basket = [];
this.allSelected = false;
} else {
this.basket = clone(this.fruits);
this.allSelected = true;
}
}
}
<ion-list>
<ion-item>
<ion-select multiple [value]="basket" (ionChange)="onBasketChange($event)">
<ion-select-option *ngFor="let fruit of fruits" [value]="fruit">{{fruit}}</ion-select-option>
</ion-select>
</ion-item>
<ion-item (click)="toggleSelectAll()">
<ion-checkbox slot="start" [checked]="allSelected"></ion-checkbox>
<ion-label>select all</ion-label>
</ion-item>
</ion-list>