ionic 单选框
ionic 单选框
Ionic是一个基于Angular框架的开源移动端应用开发框架，其中包含了众多基本组件，其中就包括单选框控件。
单选框组
单选框是从一组互斥的选项中选择一个选项的输入控件。Ionic中通过ion-radio-group和ion-radio来实现单选框，使用步骤：
<ion-list>
<ion-radio-group>
<ion-item>
<ion-label>选项1</ion-label>
<ion-radio></ion-radio>
</ion-item>
<ion-item>
<ion-label>选项2</ion-label>
<ion-radio></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
以上代码中，ion-list为列表组件，ion-radio-group为单选框组组件，内部添加ion-item表示单选框选项，可以在ion-item标签内添加ion-label标签来表示每个选项的标签文字，ion-radio用来表示单选框按钮。
组事件
使用ion-radio-group可以通过ngModel绑定当前选中的选项，并且可以添加ionChange事件来监听选项改变事件，代码如下：
<ion-list>
<ion-radio-group (ionChange)="radioChanged($event)">
<ion-item>
<ion-label>选项1</ion-label>
<ion-radio [value]="'选项1'"></ion-radio>
</ion-item>
<ion-item>
<ion-label>选项2</ion-label>
<ion-radio [value]="'选项2'"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
当选项改变时，会调用定义在组件中的radioChanged()函数，可以在其中获取当前选中的选项。
@Component({
selector: 'my-page',
templateUrl: 'my-page.html'
})
export class MyPage {
selectedOption: string;
radioChanged(event) {
this.selectedOption = event.detail.value;
}
}
自定义选项
可以通过ion-radio的slot属性来对选项进行自定义，将自定义的内容放置在ion-radio标签内部即可。代码如下：
<ion-list>
<ion-radio-group>
<ion-item>
<ion-label>选项1</ion-label>
<ion-radio slot="start">
<ion-icon name="star"></ion-icon>
</ion-radio>
<ion-radio slot="end"></ion-radio>
</ion-item>
<ion-item>
<ion-label>选项2</ion-label>
<ion-radio slot="start">
<ion-icon name="heart"></ion-icon>
</ion-radio>
<ion-radio slot="end">
<ion-icon name="bookmark"></ion-icon>
</ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
以上代码中，自定义内容为在ion-radio中插入了ion-icon标签，分别表示开始和结束位置的自定义图标。
总结
以上便是ionic中单选框的使用方法和注意事项，通过上述内容，我们可以看到ionic具有灵活的组合方式和自定义能力，可以满足大部分单选框的使用场景，并且通过ngModel和ionChange事件可以方便地获取到当前选中项，方便进一步处理。