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打印网页部分内容的脚本
Nov 17 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
JavaScript执行顺序详细介绍
Dec 04 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
JS实现的tab页切换效果完整示例
Dec 18 Javascript
Node.js系列之发起get/post请求(2)
Aug 30 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
PHP提取中文首字母
2008/04/09 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
33种Javascript 表格排序控件收集
2009/12/03 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
浅析return false的正确使用
2013/11/04 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
javascript编写简易计算器
2017/05/06 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
Ajax和javascript的区别
2013/07/20 面试题
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
银行业务授权委托书
2014/10/10 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
python解析json数据
2022/04/29 Python
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技