CODEWITHSUNDEEP
ionic-framework
Ritesh gupta
Ritesh gupta

Reputation: 35

ionic select with multiple=true

i am loading a page in ionic with values fetching from php, Eg. edit profile page. Here i am using an <ion-select multiple="true"> item. Here when user selects multiple values then in php side i am ready the array object and storing the values of selected items as "Delhi,Koltata,Mumbai".

Now the challenge i am facing is how to show those values as selected when the ionic page is loaded. I am using like --

<ion-select multiple="true" value="{{vcity}}" placeholder="Select city" name="city" [(ngModel)]="postData.city">

But when the <ion-select> is loading it's showing blank, that i understood for sure as values of vcity here is "Delhi,Koltata,Mumbai" which is not readable to <ion-select value="{{vcity}}">

So how i can make this thing happen. Any idea for startup.

THank you

This is my current code, here the problem is that the values are not getting selected when the page loads --

<ion-select multiple="true" placeholder="Select Caste" name="caste" [(ngModel)]="postData.caste">
                            <ion-select-option *ngFor="let caste of casteData" value="{{caste.name}}" selected='caste.selected ? "selected" : "" '>{{caste.name}}</ion-select-option>
                        </ion-select>

Upvotes: 0

Views: 816

Answers (2)

Ritesh gupta
Ritesh gupta

Reputation: 35

So, finally i got my solution. I want to thank @Mostafa Harb, i am up-voting your answer for the help, for guiding and helping me, using your codes and with some on tweaking i finally got what i wanted. Here is what i have done .

        this.casteData = [];
        const splitValues = this.vcaste.split(',');
        for (const data of splitValues) {
          this.casteData.push(data);
        }



<ion-select multiple="true" [value]="casteData" placeholder="Select Caste" name="caste" [(ngModel)]="postData.caste">......</ion-select>

Here in "casteData" array the selected values are present which is supplied to the ion-select as [value]="casteData"

Upvotes: 0

Mostafa Harb
Mostafa Harb

Reputation: 1675

Inside you ts file declare new varaible example :

cities = [];

then inside ngOnInit() or the place your getting the vcity value from... use:

const splitValues = vcity.split(',');
for(let i =0;i<splitValues.length;i++) {
    cities.push({name : splitValues[i]});
}

Also Edited In ion-select just edit ngmodel="splitedValues" And Inside ion-select add :

   <ion-select-option *ngFor="let city of cities">{{city.name}}</ion-select-option>

Edited Part : According to you edits in variable names:

  1. First remove the selected="...." part since its wrong.
  2. Second thing (this is up to you and you can skip it) , in the value of selected option , its always better to set an id since it should be unique value except if city name will not be decalred again so that will cause no problem...
  3. Third thing which is important to make the selection which is passing the values you need to be selected in ngModel, it could be the splitValues we defined as const, you can change it to become this.splitValues and decalre SplitValues in ngModel or if you wanted to work with second number which i told it's up to you is to make anothet splitValues variable but for id's of cities and thus change the ion-select-option value in your code to [value]="caste.id" or value="{{caste.id}}"

Upvotes: 1

Related Questions