iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >angular中radio单选的问题解决demo
  • 590
分享到

angular中radio单选的问题解决demo

angular radio单选angular radio 2023-05-20 05:05:53 590人浏览 八月长安
摘要

html中单选框用法 html中单选框用法如下,checked用来选中默认的单选项: <input type="radio" name="sex" value="male" c

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单选的资料请关注编程网其它相关文章!

--结束END--

本文标题: angular中radio单选的问题解决demo

本文链接: https://www.lsjlt.com/news/213946.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • angular中radio单选的问题解决demo
    html中单选框用法 html中单选框用法如下,checked用来选中默认的单选项: <input type="radio" name="sex" value="male" c...
    99+
    2023-05-20
    angular radio单选 angular radio
  • element编辑表单el-radio回显之后无法选择的问题解决
    目录前言问题网上的解决方案前言 提前说明哦,这是一篇很基础类的文章,只适合小小白阅读,因为以下文章内容来源于我刚入行时的笔记。各位高人请绕道,避免浪费时间,谢谢~ 今天主要来谈一...
    99+
    2024-04-02
  • vue中radio单选框如何实现取消选中状态问题
    目录vue radio单选框如何取消选中状态客户需求如何获取radio的选中值 、选中状态方法1方法2总结vue radio单选框如何取消选中状态 客户需求 单选radio选中后,再...
    99+
    2023-05-20
    vue中radio单选框 radio单选框取消选中状态 radio单选框选中状态
  • layui中radio单选限制下一个radio单选的示例分析
    这篇文章主要为大家展示了“layui中radio单选限制下一个radio单选的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“layui中radio单选限...
    99+
    2024-04-02
  • 如何解决layui中select、radio等表单组件不显示的问题
    这篇文章主要介绍如何解决layui中select、radio等表单组件不显示的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!layui是国内一款界面比较整洁大方的ui框架,里面封...
    99+
    2024-04-02
  • jquery中怎么获取单选radio的值
    jquery中怎么获取单选radio的值,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。使用jquery获取radio的值,最重要的是掌握j...
    99+
    2024-04-02
  • jquery如何去掉radio单选框的选中状态
    这篇文章主要讲解了“jquery如何去掉radio单选框的选中状态”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery如何去掉radio单选框的选中状...
    99+
    2024-04-02
  • angular中的observable问题
    目录angular的observable1、取消订阅   2、多次输出     3、使用pipe对抛出的数据进行处理angular ...
    99+
    2024-04-02
  • angular中怎么解决ngRoute路径出现#!#的问题
    这篇文章主要介绍了angular中怎么解决ngRoute路径出现#!#的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在做一个开源项目的时候,使用了"angul...
    99+
    2023-06-15
  • 如何解决ionic和angular上拉加载的问题
    这篇文章主要介绍了如何解决ionic和angular上拉加载的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。说到ionic上拉加载就跟p...
    99+
    2024-04-02
  • 解决SpringBoot中的Scheduled单线程执行问题
    目录问题描述原因分析:解决方案:补充:问题描述 在一次SpringBoot中使用Scheduled定时任务时,发现某一个任务出现执行占用大量资源,会导致其他任务也执行失败。类似于以下...
    99+
    2024-04-02
  • angular使用TweenMax动画库的问题和解决方法
    最近闲来无事,捣鼓捣鼓CSS 发现了一个比较好动画库,就是TweenMax 用起来略微有点麻烦,但是效果确实可以。 首先在angular中使用TweenMax就得先通过npm 安装 ...
    99+
    2024-04-02
  • 如何解决win8电脑右键菜单中的新建选项消失的问题
    这篇文章主要介绍如何解决win8电脑右键菜单中的新建选项消失的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!首先,咱们同时按下键盘上的win+R打开电脑的运行窗口,然后在运行窗口中输入regedit并单击回车,这...
    99+
    2023-06-27
  • jsp中文乱码问题的简单解决方法
    简单解决jsp中文乱码问题 初学jsp制作一个简单的响应页面 具体代码如下: <form action="test.jsp"> username : <in...
    99+
    2024-04-02
  • Django表单外键选项初始化的问题及解决方法
    问题描述 先说明一下问题的由来: Django的模型中经常会用ForeignKey来关联其他表格数据 class MeasureTask(models.Model): t...
    99+
    2024-04-02
  • 解决PHP代码中单引号转义的问题
    解决PHP代码中单引号转义的问题 在PHP开发中,经常会遇到处理字符串的情况,而在字符串中有可能包含单引号,这时就需要对单引号进行转义。单引号在PHP中用来表示字符串的开始和结束,因此...
    99+
    2024-04-02
  • golang中的单引号转义问题怎么解决
    今天小编给大家分享一下golang中的单引号转义问题怎么解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。golang的单引...
    99+
    2023-07-05
  • 如何解决easyui中的datagrid跨页勾选的问题
    这篇文章将为大家详细讲解有关如何解决easyui中的datagrid跨页勾选的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。easyui的datagrid分页显示数据...
    99+
    2024-04-02
  • PHP中如何用Trait解决单继承问题
    这篇文章主要讲解了“PHP中如何用Trait解决单继承问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“PHP中如何用Trait解决单继承问题”吧!我们都知道PHP是单继承语言,但是有些时候...
    99+
    2023-06-29
  • SpringBoot中的Scheduled单线程执行问题怎么解决
    本篇内容主要讲解“SpringBoot中的Scheduled单线程执行问题怎么解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“SpringBoot中的Scheduled单线程执行问题怎么解决”...
    99+
    2023-07-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作