在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單選框。