I have 2 select in ionic 2 and i am able to dynamically populate the second based on the value selected in first. but i cannot set the selected default option after the population. i tried:
<ion-item>
<ion-label>City</ion-label>
<ion-select (ionChange)="setCity($event)">
<ion-option selected >City1</ion-option>
<ion-option >City2</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Zona</ion-label>
<ion-select >
<ion-option *ngFor ="let location of locations[city]"
[selected] = location.selected >
{{location.zone}}
</ion-option>
</ion-select>
</ion-item>
in .ts
this.locations = {'City1':[{ zone: 'Zone1', selected: true},{zone:'Zone2', selected: false}],
'City2': [{zone: 'Zone3', selected: false} {zone:'Zone4', selected: true}]}
setCity(event){
this.city = event;
}
there is no selected value after the second ion-select is populated
thank you.
Try setting the ngModel attribute in ion-select and value attribute in ion-option like below
<ion-label>Zona</ion-label>
<ion-select [(ngModel)]="mLocation" >
<ion-option [value] = "location" *ngFor ="let location of locations[city]"
[selected] = location.selected >
{{location.zone}}
</ion-option>
</ion-select>
Create a change event handler on the first select element. Then have that call a method, passing the selected value with it. Then do some checks on the selected values to determine if you want to show the next select and then the list.
Check out this StackOverflow question How to show second dropdown data based on previous dropdown selection
Working version: https://embed.plnkr.co/Qu1lL6PDIX2DTDGv01ZI/
UPDATE Display Default selected item
You wanna display Default selected item then you need to add these few line in your html page
like that:
<ion-label>District</ion-label>
<ion-select (ionChange). ....
<ion-option [value]="0" >select District</ion-option>
<ion-option [value]="sDistrict" *ngFor = ...
</ion-select>
and add these line in your type script(.ts) file
export class HomePage {
....
sState: number = "0";
sDistrict: number = "0";
.....
}
if you face any problem then let me know.
Related
I am using Reactive form as shown below.
HTML file
<ion-select formControlName="gender" (ionChange)="onGenderChange($event)">
<ion-select-option value="1">Male</ion-select-option>
<ion-select-option value="2">Female</ion-select-option>
</ion-select>
TS File
I want to get the selected text (Male or Female) instead of its value. Below is on Change event of select dropdown.
onGenderChange(event) {
console.log("onGenderChange : ", event.detail.value); //its return only value
}
Please help me to solve this.. Thanks in advance.
It will depend on what type of data you'll get from your backend but you can choose what to use as value and as text with data binding.
For example in my .ts page file I created this data with your function :
myData = ["Testing", "Testing 2", "Testing 3"]
onGenderChange(event) {
console.log("onGenderChange : ", event.detail.value); //its return only value
}
And with data biding I could use this array as I want in the .html page
<ion-item>
<ion-label>Gender</ion-label>
<ion-select formControlName="gender" (ionChange)="onGenderChange($event)">
<ion-select-option value="{{myData[0]}}">{{myData[0]}}</ion-select-option>
<ion-select-option value="{{myData[1]}}">{{myData[1]}}</ion-select-option>
<ion-select-option value="{{myData[2]}}">{{myData[2]}}</ion-select-option>
</ion-select>
</ion-item>
and in the console you'll get "onGenderChange : Testing 2"
I have a form in my ionic project that has 2 dropdown menus of selection ion-select.
When the user selects an option in the first dropdown menu, it generates the options in the second dropdown list. This works well.
When I add new fields, I can reestablish the values of the first list displayed with [(ngModel)] = null in .ts, but I have not been able to reestablish those in the 2 drop-down list.
Image of error
,
image
This is the markup I have
<div formArrayName="sucursales" margin-bottom>
<!--generate new registration fields-->
<section [formGroupName]="i" *ngFor="let tech of form.controls.sucursales.controls; let i = index">
<ion-item>
<ion-icon name="list" item-start></ion-icon>
<ion-label>Departamento</ion-label>
<ion-select [(ngModel)]="locate" name="country" #country formControlName="country" (ionChange)="CountryChange($event)">
<ion-option *ngFor="let department of ubicacion; let i = index" value="{{department.departamento}}">{{department.departamento}}</ion-option>
</ion-select>
</ion-item>
<ion-item *ngFor="let x of selectedMunicipality">
<ion-icon name="list" item-start></ion-icon>
<ion-label>Municipio</ion-label>
<ion-select [(ngModel)]="locates" name="state" #state formControlName="state">
<ion-option *ngFor="let municipio of x.ciudades" value="{{municipio}}">{{municipio}}</ion-option>
</ion-select>
</ion-item>
And this id my code .ts:
this.http.get('http://localhost/ionic-php-mysql/colombia.json').map(res => res.json()).subscribe(
data => {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
this.ubicacion = data.colombia;
},
error => {
console.log("Oops!", error);
}
);
CountryChange(value: string) {
this.locate = null; //It works well
this.locates = null; //it does not work
this.selectedMunicipality = this.ubicacion.filter(item => item.departamento === value)
}
I want the second ion-select to select according to the first ion-select, and if I add new fields dynamically that the new values are independent.
I finally resolved.
buildGroup(): FormGroup {
return this.fb.group({
selectedSubcategory: [""],
});
CountryChange(value, index:number) {
this.productos.controls[index]selectedMunicipality = this.ubicacion.filter(item => item.departamento === value)
}
and in HTML
(ionChange)="CountryChange($event,i)"
<ion-item *ngFor="let x of tech.selectedMunicipality">
I'm facing a problem with ionic select options. In a settings popup, I defined a few options and one is selected="true" like the following code:
<ion-select (ionChange)="changeStartpoints($event)" interface="popover">
<ion-option value="1" selected="true">1</ion-option>
<ion-option value="2">2</ion-option>
</ion-select>
This works perfectly fine, but now I don't want the first option to be selected by default every time I open the settings popup. If the second option was selected the last time, I want the second option to be pre-selected this time opening the popup.
I tried this:
<ion-select (ionChange)="changeStartpoints($event)" interface="popover">
<ion-option value="1" selected="isSelected_Startpoints(170)">1</ion-option>
<ion-option value="2" selected="isSelected_Startpoints(501)">2</ion-option>
</ion-select>
where isSelected_Startpoints() is:
isSelected_Startpoints (value: number) {
console.log(this.startpoints);
if (this.startpoints == value) {
return true;
} else {
return false;
}
}
and changeStartpoints() is:
changeStartpoints (change) {
change = parseInt(change);
this.startpoints = change;
}
but it did not work. Not even the console.log appeared.
So my question is, Is it possible to link functions to the "selected" attribute? And how can I solve my problem?
Thanks for any help
Give something like this a try:
<ion-select (ionChange)="changeStartpoints($event)" interface="popover">
<ion-option value="1" selected="{{startpoints === 170}}">1</ion-option>
<ion-option value="2" selected="{{startpoints === 501}}">2</ion-option>
</ion-select>
My guess is your version may have worked if you changed your selected to [selected] too
I want to make the first item in the list to be always checked but checked="true" does not seem to be working
<ion-item>
<ion-label class="label">Change City</ion-label>
<ion-select checked="true" [(ngModel)]="cityName"(ionChange)="getCity()">
<ion-option class="option" *ngFor="let city of City" value='{{city.cname}}' >{{city.cname}}</ion-option>
</ion-select>
</ion-item>
you should remove checked="true" from ion-select and try to checked from the .ts file like this:-
export class MyClass {
constructor() {
this.cityName= '**your city name**';
}
}
Note:- checked="true" not working because you used this in
ion-select so, inside the ion-select all option are occur.So it can't
get which option you want to check from ion-select.
Using model driven form to select default option, so residence is already set:
<ion-select formControlName="residence">
<ion-option [value]='"0"'>{{freeCalcForm.controls.partyAName.value}}</ion-option>
<ion-option [value]='"1"'>{{freeCalcForm.controls.partyBName.value}}</ion-option>
</ion-select>
I don't see the selected value:
But clicking on the ion-select shows that the value is already selected correctly:
I tried selected="true" and selected="selected" on first option without any effect.
You should bind a model to your select:
<ion-select [(ngModel)]="myModel">
and set your default selection in the model. For example:
// page.html
<ion-select [(ngModel)]="gender">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
// page.js
export class BasicPage {
gender: string = "f";
}
Example truncated from here.