angularjs 获取默认选中的单选按钮的value方法


Posted in Javascript onFebruary 28, 2018

在Html页面中,有三个单选按钮,默认选中的是第二个“重要”这个选项,设置ng-checked="true",把该选项默认选中,可是在提交表单时,却提示$scope.level为undefine状态,明明默认选中了为什么却是undefine呢?

于是,先测试了一把:在Html页面写下下面的代码:

<span style="font-size:18px;"><div ng-controller="testCtrl"> 
 <div > 
  <label > 
   <input type="radio" value="Normal" ng-model="level" name="level" 
   >一般 
  </label> 
  <label > 
   <input type="radio" value="Important" ng-model="level" name="level" 
     ng-checked="true" 
   >重要 
  </label> 
  <label > 
   <input type="radio" value="Urgent" ng-model="level" name="level" 
   >紧急 
  </label> 
 
 
 </div> 
  <div> {{ level }}</div>    //显示单选按钮选中的value 
</div></span>

页面第一次加载,虽然“重要”这个单选按钮是默认选中,但是页面却不显示重要这个单选按钮对应的value,

点击“紧急”按钮,下面会显示“紧急”按钮的value,

原来,在页面加载时,$scope.level没有被赋值,没有初始值,即便 ng-checked="true",却也不显示默认选中的值!需要在js中设置:$scope.level= "Important";这时,刷新页面,会默认显示选中的按钮的value:

以上这篇angularjs 获取默认选中的单选按钮的value方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
初识javascript 文档碎片
Jul 13 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
angularJS的radio实现单项二选一的使用方法
Feb 28 #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
You might like
短波的认识
2021/03/01 无线电
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
python3安装speech语音模块的方法
2018/12/24 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
银行柜员应聘推荐信范文
2013/11/24 职场文书
表彰先进的通报
2014/01/31 职场文书
工程技术员岗位职责
2014/03/02 职场文书
学校春季防火方案
2014/06/08 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
卖房授权委托书样本
2014/10/05 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
2015年助残日活动总结
2015/03/27 职场文书
大学生党课感想
2015/08/11 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android
springboot读取resources下文件的方式详解
2022/06/21 Java/Android