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.
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 two ion select and I would like to capture the value of each select from the TS when I click a button. Please help
part of code:
<ion-item>
<ion-label class="lbReward" color="dark" >Reward Type: </ion-label>
<ion-select (ionChange) = "onChange()" [ngModel] = "selectedRewardType">
<ion-option value="priceDiscount">Total Price Discount</ion-option>
<ion-option value="categoryDiscount">Category Price Discount</ion-option>
<ion-option value="freeGiftwithPrice">Sufficient Price Free Gift</ion-option>
<ion-option value="freeGiftwithMeal">Meal with Free Gift</ion-option>
</ion-select>
</ion-item>
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 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.
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.