How to add values in dropdown in ionic 2 dynamically

Question

I want a dropdown in my form. I know how to add options in dropdown statically, but, I want it to be dynamic.

My code

<ion-item>
    <ion-label>Select Type</ion-label>
    <ion-select [(ngModel)]="selectedvalue" #item>
        <ion-option *ngFor="let item of items" [value]="item">{{item}}</ion-option>
    </ion-select>
</ion-item>

I have written the html code for this. But I don't know what to do in my .ts file. How to assign values to items?

Do you have an array list in your page called items? Please show the page.ts code — Will.Harris, Jul 01 '16 at 10:18
no,i am new bee so i don't know how to create arraylist or array ..so please if you have sample code show me. — Varshil shah, Jul 01 '16 at 10:21

Will.Harris · Accepted Answer · 2016-07-01T10:59:48.973

9

What you need to do in your code is define the options array and a variable for the selected option in Page.ts and at some point populate it with option objects. So define the array like this... (i'm using TypeScript definitions for each property here because why not)

export class Page {
    selectedValue: number;
    optionsList: Array<{ value: number, text: string, checked: boolean }> = [];

    constructor() { }

Alternatively just something like this should also work...

    optionsList: any[] = [];

And then populate the array with option objects (each object should have 2 properties and optionally a 3rd if you want to pre-select an option).

Where you do this will depend on if it is being populated asynchronously or not. For this example I will just do it in the constructor...

constructor() {
     this.optionsList.push({ value: 1, text: 'option 1', checked: false });
     this.optionsList.push({ value: 2, text: 'option 2', checked: false });
}

And your HTML code should look something like this...

<ion-select [(ngModel)]="selectedvalue">
    <ion-option *ngFor="let item of optionsList" value="{{item.value}}" checked="{{item.checked}}">{{item.text}}</ion-option>
</ion-select>

edited Jul 01 '16 at 10:59

answered Jul 01 '16 at 10:37

Will.Harris

4,004
2
24
37

i have one more question.. how i validate email field in .ts file...i know this is different point.. – Varshil shah Jul 01 '16 at 11:03
You will need to create a custom validator and use a regex to validate the email. This can differ a lot depending on if you want the vaildator to be global or just inside the Page.ts. I'd suggest making a new question or researching. Maybe this post can help you http://stackoverflow.com/questions/34072092/generic-mail-validator-in-angular2 – Will.Harris Jul 01 '16 at 11:13
hey WIll Harris i want to fetch selected value that is in array list how i fetched it? – Varshil shah Jul 04 '16 at 06:26
Im not too sure what it is you are asking. Also, its not good practice on Stackoverflow to ask additional questions to something that has already been answered. It might be worth creating another question so that you can provide more detail on the problem :) – Will.Harris Jul 04 '16 at 09:28

score 0 · Answer 2 · answered Jan 18 '17 at 08:58

You need to have one model and one array. Array will contain set of items which will be displayed in "select".

The component code will look like below:

export class Modal {

categories = [
 {
   title: 'Locked',
   price: 100 
 },
 {
   title: 'Liquid',
   price: 8000
 }];         

 selectedCategory = this.categories[0]; 

}

Template code will look like below:

<ion-item>
    <ion-select [(ngModel)]="selectedCategory">
          <ion-option *ngFor="let category of categories;" 
                  [value]="category">{{category.title}}</ion-option>      
    </ion-select>
</ion-item>

Hope this will help.

How to add values in dropdown in ionic 2 dynamically

2 Answers2