关于angular中radio单选的问题

html中单选框用法如下,checked用来选中默认的单选项:

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

如果使用[(ngModel)]绑定后,checked就不再生效,此时默认选中项与绑定的sex值相关,设置ngmodel绑定的sex值即可

  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方法也可以

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Angular单选按钮(radio buttons)通常用于在一组选项选择一个选项。你可以使用ngModel指令来实现单选按钮的绑定和双向数据绑定。根据提供的引用内容,我可以看出有三种使用ngModel绑定单选按钮的方式。 引用展示了一种使用[(ngModel)]属性绑定单选按钮的方式。每个单选按钮都有一个相同的name属性,通过[(ngModel)]绑定到变量line上。其,值为"shengwang"和"zhongchuang"的单选按钮分别代表声网和创。这种方式可以实现双向数据绑定,即当用户选择了一个选项时,line变量的值会自动更新。 引用展示了一种简单的单选按钮示例,其只使用了name和value属性。name属性仍然相同,而value属性分别为"shengwang"和"zhongchuang"。这种方式不使用ngModel,因此不具备双向数据绑定的功能。 引用介绍了使用ngModel和ngModelChange事件的方法。ngModel绑定了变量line的值,ngModelChange事件在选项发生变化时触发,并将新的值作为参数传递给on函数。这种方式可以实现在选择单选按钮时执行一些自定义的逻辑。 所以,以上是在Angular使用ngModel绑定单选按钮的几种方式。你可以根据自己的需求选择其一种来实现单选按钮的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [关于angularradio单选问题](https://blog.csdn.net/ping_lvy/article/details/114699864)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值