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"是表示是否毕业的一组单选按钮。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳,地球,月球 运作规律
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具