脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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单选的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • Angular4的输入属性与输出属性实例详解

    Angular4的输入属性与输出属性实例详解

    这篇文章主要介绍了Angular4的输入属性与输出属性,结合实例形式详细分析了Angular4输入属性与输出属性的概念、功能及相关使用技巧,需要的朋友可以参考下
    2017-11-11
  • Angular4 中内置指令的基本用法

    Angular4 中内置指令的基本用法

    不得不说指令是ng最为强大的功能之一，好吧，也可以去掉之一，是最强大的功能。下面这篇文章主要给大家介绍了关于Angular4中内置指令的基本用法，文中通过示例代码介绍的非常详细，需要的朋友们下面来一起看看吧。
    2017-07-07
  • 深入理解Angular中的依赖注入

    深入理解Angular中的依赖注入

    本篇文章主要介绍了深入理解Angular中的依赖注入，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Ionic + Angular.js实现验证码倒计时功能的方法

    Ionic + Angular.js实现验证码倒计时功能的方法

    验证码倒计时这个功能相信对大家每个人来说都不陌生，之前介绍了在Android中的实现方法，下面这篇文章主要给大家介绍了利用Ionic + Angular.js实现验证码倒计时功能的相关资料，文中介绍的非常详细，需要的朋友们下面来一起看看吧。
    2017-06-06
  • Angular 输入框实现自定义验证功能

    Angular 输入框实现自定义验证功能

    AngularJS 表单和控件可以验证输入的数据。本文给大家介绍Angular 输入框实现自定义验证功能，非常不错，具有参考借鉴价值，需要的朋友参考下
    2017-02-02
  • AngularJS创建自定义指令的方法详解

    AngularJS创建自定义指令的方法详解

    这篇文章主要介绍了AngularJS创建自定义指令的方法,详细的分析了自定义指令的原理、实现步骤、实现方法与相关注意事项,需要的朋友可以参考下
    2016-11-11
  • Angular中$compile源码分析

    Angular中$compile源码分析

    本文给大家分享的是通过angular中的$compile源码进行分析，从而更好的理解angular的使用，非常的不错，希望大家能够喜欢。
    2016-01-01
  • angular4 JavaScript内存溢出问题

    angular4 JavaScript内存溢出问题

    本篇文章主要介绍了angular4 JavaScript内存溢出问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • Angular中的Promise对象($q介绍)

    Angular中的Promise对象($q介绍)

    这篇文章主要介绍了Angular中的Promise对象($q介绍),本文讲解了Promise模式、Q Promise的基本用法、AngularJs中的$q.defferd等内容,需要的朋友可以参考下
    2015-03-03
  • 深入理解angular2启动项目步骤

    深入理解angular2启动项目步骤

    本篇文章主要介绍了深入理解angular2启动步骤 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论