angular中radio單選的問(wèn)題解決demo
更新時(shí)間：2023年05月12日 10:07:26 作者：xiagh
這篇文章主要為大家介紹了angular中radio單選的問(wèn)題解決demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
html中單選框用法
html中單選框用法如下，checked用來(lái)選中默認(rèn)的單選項(xiàng)：
<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 萬(wàn)能的 ngModel和ngModelChange方法
當(dāng)使用ngModel時(shí)，如果用綁定的sex傳值必須使用ngModelChange，因?yàn)檫x中單選項(xiàng)后，(click)執(zhí)行要早于ngModelChange，所以此時(shí)(click)中傳入的值還是未綁定的舊值；如果使用模板變量則不存在這個(gè)問(wèn)題。
<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單選的問(wèn)題解決demo的詳細(xì)內(nèi)容，更多關(guān)于angular radio單選的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
淺談Angular的12個(gè)經(jīng)典問(wèn)題
Angular作為目前最為流行的前端框架，受到了前端開(kāi)發(fā)者的普遍歡迎。不論是初學(xué)Angular的新手，還是有一定Angular開(kāi)發(fā)經(jīng)驗(yàn)的開(kāi)發(fā)者，了解本文中的12個(gè)經(jīng)典面試問(wèn)題，都將會(huì)是一個(gè)深入了解和學(xué)習(xí)Angular2的知識(shí)概念的絕佳途徑。2021-05-05
使用Angular CLI快速創(chuàng)建Angular項(xiàng)目的一些基本概念和寫(xiě)法小結(jié)
這篇文章主要介紹了使用Angular CLI快速創(chuàng)建Angular項(xiàng)目的一些基本概念和寫(xiě)法小結(jié),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
angular中實(shí)現(xiàn)控制器之間傳遞參數(shù)的方式
本篇文章主要介紹了angular中實(shí)現(xiàn)控制器之間傳遞參數(shù)的方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-04-04
本文主要講解AngularJS表格的知識(shí)內(nèi)容，這里整理了基礎(chǔ)資料，并附代碼和示例效果圖，有興趣的小伙伴可以參考下2016-08-08
Angular8 簡(jiǎn)單表單驗(yàn)證的實(shí)現(xiàn)示例
這篇文章主要介紹了Angular8 簡(jiǎn)單表單驗(yàn)證的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
淺談Angular2 ng-content 指令在組件中嵌入內(nèi)容
本篇文章主要介紹了淺談Angular2 ng-content 指令在組件中嵌入內(nèi)容，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
本篇文章主要介紹了Angularjs的啟動(dòng)過(guò)程分析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
Angular @HostBinding()和@HostListener()用法
本篇文章主要介紹了Angular @HostBinding()和@HostListener()用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Angularjs實(shí)現(xiàn)多個(gè)頁(yè)面共享數(shù)據(jù)的方式
本文給大家介紹使用Angularjs實(shí)現(xiàn)多個(gè)頁(yè)面共享數(shù)據(jù)的方式，通過(guò)定義一個(gè)共享服務(wù)service來(lái)實(shí)現(xiàn)此功能，對(duì)angularjs共享數(shù)據(jù)相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)2016-03-03
這篇文章主要介紹了AngularJS指令與控制器之間的交互功能,結(jié)合實(shí)例形式分析了AngularJS控制器調(diào)用相關(guān)指令操作技巧,需要的朋友可以參考下2016-12-12