angular中radio單選的問題解決demo

html中單選框用法

html中單選框用法如下，checked用來選中默認的單選項：

<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female

  sex:string="male"
   <input type="radio" name="sex" [(ngModel)]="sex" value="male">Male
    <input type="radio" name="sex" [(ngModel)]="sex" value="female">Female

選中某單選框后觸發事件

有三種方法

1.添加(click)事件，#male和#female是ng2中的模板變量

<input type="radio" name="sex" (click)="print(male.value)" value="male" #male checked>male
<input type="radio" name="sex" (click)="print(female.value)" value="female" #female>female

2 萬能的 ngModel和ngModelChange方法

當使用ngModel時，如果用綁定的sex傳值必須使用ngModelChange，因為選中單選項后，(click)執行要早于ngModelChange，所以此時(click)中傳入的值還是未綁定的舊值；如果使用模板變量則不存在這個問題。

<input type="radio" name="sex" [ngModel]="sex" (ngModelChange)="sex=$event;print(sex)" value="male">Male
<input type="radio" name="sex" [ngModel]="sex" (ngModelChange)="sex=$event;print(sex)" value="female">Female

3.原生的change方法也可以

以上就是angular中radio單選的問題解決demo的詳細內容，更多關于angular radio單選的資料請關注其它相關文章！