Ionic 单选框学习笔记

在 Ionic 中，单选框是一种常用的表单控件，用于允许用户从一组选项中选择一个选项。本篇学习笔记将介绍如何使用 Ionic 创建单选框，并提供一个简单的实例。

创建单选框

创建单选框需要使用 ion-radio-group 和 ion-radio 组件。首先在 HTML 文件中创建 ion-radio-group 组件，设置它的 [(ngModel)] 属性为一个变量，用于存储用户选择的选项：

htmlCopy Code
<ion-radio-group [(ngModel)]="selectedOption">

然后在 ion-radio-group 中添加多个 ion-radio 组件，每个 ion-radio 表示一种选项。设置 value 属性表示该选项的值，例如：

htmlCopy Code
<ion-radio value="option1">Option 1</ion-radio>
<ion-radio value="option2">Option 2</ion-radio>
<ion-radio value="option3">Option 3</ion-radio>

完整的示例代码如下：

htmlCopy Code
<ion-header>
  <ion-toolbar>
    <ion-title>
      Single Choice Example
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-radio-group [(ngModel)]="selectedOption">
      <ion-item>
        <ion-label>Option 1</ion-label>
        <ion-radio value="option1"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Option 2</ion-label>
        <ion-radio value="option2"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Option 3</ion-label>
        <ion-radio value="option3"></ion-radio>
      </ion-item>
    </ion-radio-group>
  </ion-list>

  <ion-button (click)="showSelectedOption()">Submit</ion-button>
</ion-content>

获取用户选择

当用户选择了某个选项时，selectedOption 变量的值会自动更新为所选选项的值。可以在组件中使用 selectedOption 变量来获取用户选择的选项，例如：

typescriptCopy Code
import { Component } from '@angular/core';

@Component({
  selector: 'app-single-choice',
  templateUrl: './single-choice.page.html',
  styleUrls: ['./single-choice.page.scss'],
})
export class SingleChoicePage {

  selectedOption: string;

  constructor() { }

  showSelectedOption() {
    console.log(this.selectedOption);
  }

}

可以将 selectedOption 变量传递给其他组件或页面，以便在应用程序中使用用户选择的选项。

以上就是创建和获取 Ionic 单选框的基本方法，希望对您有所帮助。