angularJS的radio实现单项二选一的使用方法


Posted in Javascript onFebruary 28, 2018

废话少说,直接上代码:

<div class="col-xs-3">
 <input type="radio" ng-value=1 ng-model="sss" name="aaa" >男
 </label>
 <label>
 <input type="radio" ng-value=0 ng-model="sss" name="aaa">女
 </label>
</div>
<div>
 {{sss}}
</div>

在ng中使用radio实现二选一的时候,需要注意几个地方:

第一:保持name的属性值要是一致的;

第二:保持ng-model对应同一个值;

第三:需要为每个radio设置ng-value,因为ng-model的对应的值就是选中的那个radio所对应的ng-value的值。

angularJS的radio实现单项二选一的使用方法

由此实现了单选,且能够传递不同的值。

以上这篇angularJS的radio实现单项二选一的使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现弹出层完美居中效果
Mar 03 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
微信小程序实现图片压缩
Dec 03 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 Javascript
vue cli 全面解析
Feb 28 #Javascript
js实现动态改变radio状态的方法
Feb 28 #Javascript
快速了解vue-cli 3.0 新特性
Feb 28 #Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 #jQuery
vue.js根据代码运行环境选择baseurl的方法
Feb 28 #Javascript
vue+element实现批量删除功能的示例
Feb 28 #Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 #Javascript
You might like
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
看了就知道什么是JSON
2007/12/09 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
python中循环语句while用法实例
2015/05/16 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
《猴子种树》教学反思
2014/02/14 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
党员倡议书
2015/01/19 职场文书
义诊活动总结
2015/02/04 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android