Angular怎么实现radio单选框

avatar
作者
筋斗云
阅读量:7

在Angular中实现radio单选框,你可以使用[(ngModel)]指令来绑定一个变量到radio按钮上,并使用name属性来将radio按钮分组。

以下是一个简单的示例:

<label>   <input type="radio" [(ngModel)]="selectedOption" name="options" value="option1">   Option 1 </label>  <label>   <input type="radio" [(ngModel)]="selectedOption" name="options" value="option2">   Option 2 </label>  <label>   <input type="radio" [(ngModel)]="selectedOption" name="options" value="option3">   Option 3 </label>  <p>Selected option: {{ selectedOption }}</p> 

在组件类中,你需要定义一个selectedOption变量来存储选中的选项:

import { Component } from '@angular/core';  @Component({   selector: 'app-radio',   templateUrl: './radio.component.html',   styleUrls: ['./radio.component.css'] }) export class RadioComponent {   selectedOption: string; } 

当用户选择一个选项时,selectedOption变量会自动更新为选中的值,并且可以在模板中通过插值表达式显示出来。

这样,你就实现了一个基本的radio单选框。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!