,可以通过以下步骤实现:
<ion-list>
<ion-radio-group [(ngModel)]="selectedOption">
<ion-item *ngFor="let option of options">
<ion-label>{{ option.label }}</ion-label>
<ion-radio [value]="option.value"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
在上面的代码中,options是一个包含选项数据的数组。ngFor指令用于循环遍历options数组,并为每个选项创建一个ion-radio组件。ion-radio-group组件用于将所有的ion-radio组件组合在一起,(ngModel)指令用于双向绑定选中的选项。
export class MyPage {
options: any[];
selectedOption: any;
constructor() {
this.options = [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' }
];
this.selectedOption = 'option1';
}
}
在上面的代码中,options数组包含了三个选项,每个选项都有一个label和一个value。selectedOption变量用于存储当前选中的选项的值,默认为'option1'。
通过以上步骤,就可以在Ionic 3中动态选择单选按钮了。用户可以通过点击不同的单选按钮来改变selectedOption变量的值,从而实现动态选择。
领取专属 10元无门槛券
手把手带您无忧上云