Geek Answers Handbook

How to dynamically add values ​​in a popup dialog

I need a dropdown menu in my form. I know how to add parameters to the dropdown list 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 wrote html code for this. But I do not know what to do in my .ts file. How to assign values ​​to elements?

+4
source share
2 answers

What you need to do in your code is to define an array of parameters and a variable for the selected parameter in Page.ts and at some point fill it with options objects. So define an array like this ... (I use TypeScript definitions for each property here, because why not)

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

    constructor() { }

- ...

    optionsList: any[] = [];

( 2 , , 3-, ).

, , . ...

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

HTML- :

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

. , "select".

:

export class Modal {

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

 selectedCategory = this.categories[0]; 

}

:

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

, .

0

More articles:


All Articles