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类 from qq
Nov 13 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
Element Carousel 走马灯的具体实现
Jul 26 Javascript
JS实现简易日历效果
Jan 25 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
php桌面中心(二) 数据库写入
2007/03/11 PHP
php垃圾代码优化操作代码
2010/08/05 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
基本DOM节点操作
2017/01/17 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
python写xml文件的操作实例
2014/10/05 Python
Python随机生成彩票号码的方法
2015/03/05 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
python实现kmp算法的实例代码
2019/04/03 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
毕业生就业协议书
2014/04/11 职场文书
股指期货心得体会
2014/09/13 职场文书
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android