angularjs中的单选框绑定数据注意事项
这里说的是angularjs 1.x
在实现单选框时,我们完全可以用html自带的<input type="radio"/>,但是配合angularjs 中的双向绑定,我们可以很方便的实现选择不同的radio,立刻更新绑定的数据。
一般会这样做
<input type="radio" name="gender" ng-model="sex" value="false" /> <input type="radio" name="gender" ng-model="sex" value="true" />
这样做我们在控制器中如果有$scope.sex; 一般点选会将字符串 false或 true绑定到 sex变量上,但是。如果我们想把一个bool值或者对象绑定到一个变量上,上面的做法是不行的,因为value属性只能绑定字符串。要绑定对象和bool类型必须用angularjs 提供的ng-value指令。
官方api有一个 对input[radio]中ngValue的说明:
AngularJS expression to which ngModel
will be be set when the radio is selected. Should be used instead of the value
attribute if you need a non-string ngModel
(boolean
, array
, ...).
就是说如果ng-model绑定一个费字符串类型的变量,请用ng-value属性替换 value属性。
如果一个页面中有多组单选框,请将同一组的单选框用同一个name属性值标示好。
<input type="radio" name="gender" ng-model="sex" ng-value="false" /> <input type="radio" name="gender" ng-model="sex" ng-value="true"checked="true /> <input type="radio" name="graduate" ng-model="graduate" ng-value="false" /> <input type="radio" name="graduate" ng-model="graduate" ng-value="true" />
如上,name="gender" 是表示性别的一组单选按钮,name="graduate"是表示是否毕业的一组单选按钮。
转载于:https://www.cnblogs.com/wjw-blog/p/7376001.html
angularjs中的单选框绑定数据注意事项相关推荐
- 在html语言中指定单选框时,htmlcss
其实就是用于开发网页的一门语言 关于HTML: 1)HTML开发的网页文档,通常是以 .htm..html 为后缀 2)HTML开发的网页文档,可以通过浏览器打开并显示(浏览器就是一个HTML解析器) ...
- 【Vue.js】Vue.js组件库Element中的单选框、多选框、输入框和计数器
1.Radio 单选框 基础用法 由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器. 要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着变量的值为相应 Rad ...
- d3.js中选择元素和绑定数据
回顾一下如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.selectAll():是选择指定元素的全部 这两个函数返回的结果称为选择集. ...
- excel 中vb组合框_Excel数据验证组合框代码
excel 中vb组合框 Instead of selecting a product code in an Excel drop down list, it's usually easier to ...
- html中表单元素中的单选框,Html表单元素及表单元素详解
大纲 1.认识表单 2.认识表单元素 3.表单元素的分类 4.表单元素--文本框 5.表单元素button 6.表单元素--单选.多选 7.表单元素--select 8.表单元素--textarea ...
- Devexpress控件中TreeList的递归绑定数据
Devexpress中的TreeList控件能实现类似于TreeView的功能 下面介绍下TreeList递归绑定DataTable中的数据 两个表.第一个表是父节点类型,第二个表是每个类型下的子节点 ...
- pyqt5在表格中添加单选框(勾选框)
先看效果图; 下面是添加后面勾选框的代码: self.cbs = []for r in range(self.rows): # 添加勾选for c in range(self.cols):if c = ...
- DataGrid中,读取数据库中的图片并绑定数据列或磁盘目录中的图片,用输出流方式...
显示效果如下 SID 图片显示 180 181 182 183 184 1 图片显示页面Html:DataGridShowPicture.aspx <%@ Page language=" ...
- input 单选框ajax提交,input radio单选框绑定change事件
各种同步方法性能比较(synchronized,ReentrantLock,Atomic) synchronized: 在资源竞争不是很激烈的情况下,偶尔会有同步的情形下,synchronized是很 ...
最新文章
- 【图像超分辨率】End-to-End Super-Resolution for Remote-Sensing Images Using an Improved Multi-Scale Residual
- 我刊成功承办第二届数据科学家大会(2018)
- html进度条实现方案,两种进度条实现方案的对比
- JavaScript重难点解析6(Promise)
- Spring : ConfigurableBeanFactory 配置能力
- EM算法的形式化推导
- bzoj1835基站选址(dp+线段树)
- libtool: Version mismatch error. This is libtool 2.4.6, but the definition of this LT_INIT
- cfd计算机模拟,cfd模拟(cfd模拟软件)
- MATLAB中绘制椭圆
- 基于Python的指数基金量化投资-通过市盈率和市净率对指数估值
- 算力测试Linux,附录:计算力的标准Linpack测试详细指南(1)
- length()、size()、sizeof()三者的区别
- 秒懂!看机器学习如何净化处理文本
- MySQL数据库引擎及区别
- 预算受限拍卖论文第二章整理
- vs2019中采用C++编程使用python中的matplotlib画图库
- 机智云物联网荣获“2021年度广州创新力大奖”
- FL Studio水果中文版V20.8电脑系统配置要求
- 大数据培训课程分享:Python数据分析与挖掘实战课程介绍
热门文章
- 第六章节 多态 (多态的概述)
- 期望dp--BZOJ3450 Easy
- 修改服务器的AJP监听地址,实习记录(五) - AJP协议文件读取漏洞
- 数据结构—线性表及其实现方式
- XSS的基本概念和原理
- 2018C/C++蓝桥杯解析
- bzoj 1901: Zju2112 Dynamic Rankings(离线树状数组+主席树)
- 安装自带python3.6的Anaconda3,并安装tensorflow,导入Pycharm中使用
- vivado2018.3根据板卡Boards直接创建工程(比如basys3和Arty A7)
- 打开无线后无法自动发现连接点的问题