angular中radio單選的問題解決demo
更新時間：2023年05月12日 10:07:26 作者：xiagh
這篇文章主要為大家介紹了angular中radio單選的問題解決demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
html中單選框用法
html中單選框用法如下，checked用來選中默認(rèn)的單選項：
<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選中某單選框后觸發(fā)事件
有三種方法
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方法
當(dāng)使用ngModel時，如果用綁定的sex傳值必須使用ngModelChange，因為選中單選項后，(click)執(zhí)行要早于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的詳細(xì)內(nèi)容，更多關(guān)于angular radio單選的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了詳解Angular路由之路由守衛(wèi)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
詳解為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法
所謂攔截器就是在目標(biāo)達(dá)到目的地之前對其進行處理以便處理結(jié)果更加符合我們的預(yù)期。Angular的$http攔截器是通過$httpProvider.interceptors數(shù)組定義的一組攔截器，每個攔截器都是實現(xiàn)了某些特定方法的Factory。本文就介紹了為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法。2016-12-12
AngularJs定時器$interval 和 $timeout詳解
這篇文章主要介紹了AngularJs定時器$interval 和 $timeout詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
詳解使用angular框架離線你的應(yīng)用（pwa指南）
這篇文章主要介紹了詳解使用angular框架離線你的應(yīng)用（pwa指南），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了移除AngularJS下URL中的#字符的方法,AngularJS是一款高人氣JavaScript庫,需要的朋友可以參考下2015-06-06
AngularJs $parse、$eval和$observe、$watch詳解
這篇文章主要介紹了AngularJs $parse、$eval和$observe、$watch的相關(guān)資料,需要的朋友可以參考下2016-09-09
詳解AngularJs路由之Ui-router-resolve（預(yù)加載）
本篇文章主要介紹了詳解AngularJs路由之Ui-router-resolve（預(yù)加載），具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
下面小編就為大家?guī)硪黄仙Ｕ刟ngularjs中的$state.go。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
通常我們需要使用管道實現(xiàn)對數(shù)據(jù)的格式化，下面這篇文章主要給大家介紹了關(guān)于Angular中管道操作符(|)的使用方法，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
Angular6實現(xiàn)拖拽功能指令drag實例詳解
這篇文章主要為大家介紹了Angular6實現(xiàn)拖拽功能指令drag實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11