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控制input输入字符解析
Dec 27 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
jQuery中extend函数详解
Jul 13 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
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
用Socket发送电子邮件
2006/10/09 PHP
php中的MVC模式运用技巧
2007/05/03 PHP
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
php上传大文件设置方法
2016/04/14 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
asp.net和php的区别点总结
2019/10/10 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
Javascript 学习笔记 错误处理
2009/07/30 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
Python3.6简单反射操作示例
2018/06/14 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
Django实现发送邮件功能
2019/07/18 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
写好求职信第一句话的技巧
2013/10/26 职场文书
党员大会主持词
2014/04/02 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
解放思想演讲稿
2014/09/11 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
2014年班干部工作总结
2014/11/25 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL