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中Object和Function的关系小结
Sep 26 Javascript
javascript实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
如何通过JS实现日历简单算法
Oct 14 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 Javascript
js面向对象方式实现拖拽效果
Mar 03 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
深入了解php4(1)--回到未来
2006/10/09 PHP
php反射应用示例
2014/02/25 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
Python 比较两个数组的元素的异同方法
2017/08/17 Python
Python import与from import使用及区别介绍
2018/09/06 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
基于python使用tibco ems代码实例
2019/12/20 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
初中班主任评语
2014/04/24 职场文书
科学发展观演讲稿
2014/09/11 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
工资收入证明
2014/10/07 职场文书
优秀员工自荐书
2015/03/06 职场文书
Python中Permission denied的解决方案
2021/04/02 Python
Python函数式编程中itertools模块详解
2021/09/15 Python