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 Replace 全部替换字符的用法小结
Dec 24 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
详解微信小程序支付流程与梳理
Jul 16 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 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
中国收音机工业发展史
2021/03/02 无线电
PHP输出时间差函数代码
2013/01/28 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
告诉大家什么是JSON
2008/06/10 Javascript
javascript获取当前ip的代码
2009/05/10 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
python生成lmdb格式的文件实例
2018/11/08 Python
Python最小二乘法矩阵
2019/01/02 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
提升python处理速度原理及方法实例
2019/12/25 Python
基于python实现操作git过程代码解析
2020/07/27 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
初中生期末考试的自我评价
2013/12/17 职场文书
企业文化建设实施方案
2014/03/22 职场文书
爱心倡议书范文
2014/05/12 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
家庭贫困证明
2014/09/23 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript