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 相关文章推荐
Javascript document.referrer判断访客来源网址
May 15 Javascript
JavaScript的public、private和privileged模式
Dec 28 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
vue router 动态路由清除方式
May 25 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
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
python 布尔操作实现代码
2013/03/23 Python
Python ldap实现登录实例代码
2016/09/30 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
python re模块的高级用法详解
2018/06/06 Python
transform python环境快速配置方法
2018/09/27 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
欧铁通票官方在线销售网站:Eurail.com
2017/10/14 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
实习医生自我评价
2013/09/22 职场文书
购房委托书范本
2014/09/18 职场文书
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技
GPU服务器的多用户配置方法
2022/07/07 Servers