脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angular radio单选

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的12个经典问题

    浅谈Angular的12个经典问题

    Angular作为目前最为流行的前端框架，受到了前端开发者的普遍欢迎。不论是初学Angular的新手，还是有一定Angular开发经验的开发者，了解本文中的12个经典面试问题，都将会是一个深入了解和学习Angular2的知识概念的绝佳途径。
    2021-05-05
  • 使用Angular CLI快速创建Angular项目的一些基本概念和写法小结

    使用Angular CLI快速创建Angular项目的一些基本概念和写法小结

    这篇文章主要介绍了使用Angular CLI快速创建Angular项目的一些基本概念和写法小结,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • angular中实现控制器之间传递参数的方式

    angular中实现控制器之间传递参数的方式

    本篇文章主要介绍了angular中实现控制器之间传递参数的方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-04-04
  • AngularJS表格详解及示例代码

    AngularJS表格详解及示例代码

    本文主要讲解AngularJS表格的知识内容，这里整理了基础资料，并附代码和示例效果图，有兴趣的小伙伴可以参考下
    2016-08-08
  • Angular8 简单表单验证的实现示例

    Angular8 简单表单验证的实现示例

    这篇文章主要介绍了Angular8 简单表单验证的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • 浅谈Angular2 ng-content 指令在组件中嵌入内容

    浅谈Angular2 ng-content 指令在组件中嵌入内容

    本篇文章主要介绍了浅谈Angular2 ng-content 指令在组件中嵌入内容，具有一定的参考价值，有兴趣的可以了解一下
    2017-08-08
  • Angularjs的启动过程分析

    Angularjs的启动过程分析

    本篇文章主要介绍了Angularjs的启动过程分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Angular @HostBinding()和@HostListener()用法

    Angular @HostBinding()和@HostListener()用法

    本篇文章主要介绍了Angular @HostBinding()和@HostListener()用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • Angularjs实现多个页面共享数据的方式

    Angularjs实现多个页面共享数据的方式

    本文给大家介绍使用Angularjs实现多个页面共享数据的方式，通过定义一个共享服务service来实现此功能，对angularjs共享数据相关知识感兴趣的朋友一起学习
    2016-03-03
  • AngularJS指令与控制器之间的交互功能示例

    AngularJS指令与控制器之间的交互功能示例

    这篇文章主要介绍了AngularJS指令与控制器之间的交互功能,结合实例形式分析了AngularJS控制器调用相关指令操作技巧,需要的朋友可以参考下
    2016-12-12

最新评论