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 相关文章推荐
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
数组Array的排序sort方法
Feb 17 Javascript
原生js实现验证码功能
Mar 16 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 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
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
解析php5配置使用pdo
2013/07/03 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
javascript 简练的几个函数
2009/08/29 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
详解在Python中处理异常的教程
2015/05/24 Python
python简单实现旋转图片的方法
2015/05/30 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
详解爬虫被封的问题
2019/04/23 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
python tkinter组件使用详解
2019/09/16 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
python爬虫工具例举说明
2020/11/30 Python
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
C语言编程练习
2012/04/02 面试题
怎样从/向数据文件读/写结构
2014/11/23 面试题
三下乡活动方案
2014/01/31 职场文书
本科应届生自荐信
2014/06/29 职场文书
《社戏》教学反思
2016/02/22 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
JavaScript实现优先级队列
2021/12/06 Javascript
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL