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 相关文章推荐
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
使用JavaScript库还是自己写代码?
Jan 28 Javascript
js 文件引入实现代码
Apr 23 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
JavaScript获取当前网页标题(title)的方法
Apr 03 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 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
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
javascript如何写热点图
2015/12/08 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
统计系教授推荐信
2014/02/28 职场文书
2014年学习雷锋活动总结
2014/03/01 职场文书
机械操作工岗位职责
2014/08/08 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
先进单位申报材料
2014/12/25 职场文书
大学生实习介绍信
2015/05/05 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书