angular中radio单选的问题解决demo

更新时间：2023年05月12日 10:07:26 作者：xiagh

这篇文章主要为大家介绍了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单选的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

详解Angular路由之路由守卫
这篇文章主要介绍了详解Angular路由之路由守卫，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
详解为Angular.js内置$http服务添加拦截器的方法
所谓拦截器就是在目标达到目的地之前对其进行处理以便处理结果更加符合我们的预期。Angular的$http拦截器是通过$httpProvider.interceptors数组定义的一组拦截器，每个拦截器都是实现了某些特定方法的Factory。本文就介绍了为Angular.js内置$http服务添加拦截器的方法。
2016-12-12
AngularJs定时器$interval 和 $timeout详解
这篇文章主要介绍了AngularJs定时器$interval 和 $timeout详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
详解使用angular框架离线你的应用（pwa指南）
这篇文章主要介绍了详解使用angular框架离线你的应用（pwa指南），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
移除AngularJS下URL中的#字符的方法
这篇文章主要介绍了移除AngularJS下URL中的#字符的方法,AngularJS是一款高人气JavaScript库,需要的朋友可以参考下
2015-06-06
AngularJs $parse、$eval和$observe、$watch详解
这篇文章主要介绍了AngularJs $parse、$eval和$observe、$watch的相关资料,需要的朋友可以参考下
2016-09-09
详解AngularJs路由之Ui-router-resolve（预加载）
本篇文章主要介绍了详解AngularJs路由之Ui-router-resolve（预加载），具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
老生常谈angularjs中的$state.go
下面小编就为大家带来一篇老生常谈angularjs中的$state.go。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
Angular中管道操作符(|)的使用方法
通常我们需要使用管道实现对数据的格式化，下面这篇文章主要给大家介绍了关于Angular中管道操作符(|)的使用方法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
2017-12-12
Angular6实现拖拽功能指令drag实例详解
这篇文章主要为大家介绍了Angular6实现拖拽功能指令drag实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11