@mhill Sure you can call selectAllItems() directly. But since you mentioned that you’re calling the items from a server I included doSomething() to add a bit of delay and an async update (simulating a server call), although you’ll most probably use something like Observables in such scenario. Unfortunately there’s currently a bug in zone.js which breaks the Angular change detection when using Observables (in combination with HTTP calls) and the view updates are not working.
hi guyzs, i tried to create select list in ionic 2 but i don’t know what’s the problem nothing output came?
Code that I used
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
templateUrl: 'build/pages/enquiry/enquiry.html',
})
export class EnquiryPage {
constructor(private nav: NavController) {}
this.items = [
{title: 'item1',id: '1'},
{title: 'item2',id: '2'},
{title: 'item3',id: '3'},
{title: 'item4',id: '4'},
{title: 'item5',id: '5'},
{title: 'item6',id: '6'}
];
}
i tried to put html code but i don’t know why it’s not display proper so i put screenshot
You question is not very clear. When you say teh output are you taking about the selected value not showing?
Does your option list show the contents of items array?
Looks like you are missing the declaration for the selectedItem that will hold selected item from the options popup.
my problem is solved…
how did you solve it?
i used below code
<ion-item>
<ion-label><ion-icon name="person"></ion-icon></ion-label>
<ion-select #item [(ngModel)]="mtype" >
<ion-option *ngFor="let item of items" value="{{item.value}}" checked="{{item.checked}}">{{item.text}} </ion-option>
</ion-select>
</ion-item>
items: Array<{ value: number, text: string, checked: boolean }> = [];
this.items.push({ value: 1, text: 'Super Distributor', checked: false });
this.items.push({ value: 2, text: 'Distributor', checked: false });
this.items.push({ value: 3, text: 'Retailer', checked: false });
this.items.push({ value: 4, text: 'End User', checked: false });
1 Like
hey i want selected item object from the ion-select.
code that i used but i didn’t get the value.
<ion-item>
<ion-label>Offer</ion-label>
<ion-select [formControl]="dthactivationForm.controls.offerControl" (ionChange)="offerSelected(item)">
<ion-option *ngFor="let item of offerArray" value="{{item.id}}">{{item.text}}</ion-option>
</ion-select>
</ion-item>
offerSelected(item)
{
//this.selOffer = item;
this.offer = item.text;
this.oamount = item.amount; // RETURN undefined
this.odisc = item.disc;// RETURN undefined
this.enableDetail();
}
1 Like
What about if the multiple="true" property is set? How would you get multiple options selected?
1 Like
Ok, so I am having a couple of issues with ion-select. Firstly, when dynamically generating the ion-select options it seems the layout of the component does not take into account the actual width of the options in the list.
Here is my html snippet:
Also the rendering of the options list on mobile devices is very slow and you can clearly see the display lagging a lot when scrolling through the list of countries (249 in the list).
More critically it seems that on many of the Android devices we have tested on the whole rendering breaks on the page to the point of no labels being rendered (on neither buttons or the select options in the popup, only rendering the select circle). Are there several non-resolved issues around ion-select that we can expect to be fixed in the next release candidate?
Edit: We found out that Angular is not very happy if it receives null values for the data - it seems to break the whole event thread or something. At least the whole app became useless after one of those cases. Perhaps it was the angular 2.1.1 that we were using? Obviously something failed then but there was no error or exception shown on the console either.
Has multiple solution?
Hi varshil, did you got any solution for this?
is this fixed? i am facing same problem
Because when you select and press ok has one and go back to open I activate all the ion-option?
<Ion-item>
<Ion-label> Watering Mode </ ion-label>
<Ion-select [(ngModel)] = "Dish.kind">
<Option-option * ngFor = "let item of modeKeys" [value] = "item"> {{item}} </ ion-option>
</ Ion-select>
</ Ion-item>
Dish = {
Kind: 'key2'
}
ModeKeys = [
{'Key1': "pablo", "price": "500"},
{'Key2': "juan", "price": "500"},
{'Key3': "lili", "price": "500"},
{'Key4': "juan", "price": "500"},
{'Key5': "juan", "price": "500"},
]
1 Like
how to find the list element selected with the help of checked value…?
Hi Millerjn, I’m facing similar issue, On selecting one item in the options, it activates all of the items, Do you have any solution? or I’m not using correct?
Here is my HTML
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/ionicframework/original/3X/7/b/7bc5f651e5db031b4e0000e4dc7af52530153a7c.png" width="443" height="500">
1 Like
it worked, Thank you very much!
Hi,
im having a problem in selecting a default option for ion-option where the options are Dynamic Can u guys help i’m new to ionic 2.
here is my code,
<ion-item>
<ion-label> Establishment ID</ion-label>
<ion-select [(ngModel)]="establishmentId" (ionChange)="dashboardView()">
<ion-option *ngFor="let establishment of establishments" value="{{establishment.COMPANYCODE}}" (ionSelect)="itemView(establishment);">{{establishment.COMPANYNAME}}</ion-option>
</ion-select>
</ion-item>
1 Like
Assign something to establishmentId in the controller.
1 Like
Can u please show me an example code i have gone through the reply’s given above but i didn’t understand how to give