How can I show and hidden another item to click the radio button? If I click on “Domestic” radio button it displays “City” select input and if I will click on “International” radio button then it will display “Country” select input and when one will display another will be hidden. I can’t do it what is the proper way to do this?
My radio button
<ion-list radio-group> <ion-row> <ion-col> <ion-item no-lines> <ion-label>Domestic</ion-label> <ion-radio ></ion-radio> </ion-item> </ion-col> <ion-col> <ion-item no-lines> <ion-label>International</ion-label> <ion-radio></ion-radio> </ion-item> </ion-col> </ion-row> </ion-list>
My select items:
<ion-item> <ion-label>Select City</ion-label> <ion-select multiple="true"> <ion-option>Kolkata</ion-option> <ion-option>Delhi</ion-option> <ion-option>Mumbai</ion-option> </ion-select> </ion-item> <ion-item> <ion-label>Select Country</ion-label> <ion-select> <ion-option>India</ion-option> <ion-option>Japan</ion-option> <ion-option>Usa</ion-option> </ion-select> </ion-item>
use ionSelect in ion-radio for example:
<ion-list radio-group> <ion-row> <ion-col> <ion-item no-lines> <ion-label>Domestic</ion-label> <ion-radio (ionSelect)="radioChecked('Domestic')"></ion-radio> </ion-item> </ion-col> <ion-col> <ion-item no-lines> <ion-label>International</ion-label> <ion-radio (ionSelect)="radioChecked('International')"></ion-radio> </ion-item> </ion-col> </ion-row> </ion-list>
use a variable in your code behind and an *ngIf
<ion-item *ngIf="hideCity"> <ion-label>Select City</ion-label> <ion-select multiple="true"> <ion-option>Kolkata</ion-option> <ion-option>Delhi</ion-option> <ion-option>Mumbai</ion-option> </ion-select> </ion-item> <ion-item *ngIf="hideCountry"> <ion-label>Select Country</ion-label> <ion-select> <ion-option>India</ion-option> <ion-option>Japan</ion-option> <ion-option>Usa</ion-option> </ion-select> </ion-item>
open your page.ts file and apply this code:
export class FilterPage { public domestic:boolean=true; hideCity:boolean=true; hideCountry:boolean=false; constructor(public navCtrl: NavController, public navParams: NavParams) { } ionViewDidLoad() { } radioChecked(val){ if(val=="Domestic"){ this.hideCountry=false; this.hideCity=true; } if(val=="International"){ this.hideCountry=true; this.hideCity=false; } } }
Hope this code will be helpful for you and working properly.
Question and answer is powered by AnsPress.io