工作积累(八)——AngularJS与单选框及多选框的双向动态绑定
2015-06-25 23:27
676 查看
AngularJS 在 <input type="text" /> 中实现双向动态绑定十分简单,如下所示:
<input type="text" ng-model="topic.title" />只需要用ng-model 与 $scope 中的属性对应,即实现了type=”text” 的双向动态绑定。当 <input type="radio" /> 及 <input type="checkbox" /> 时情况略有不同:1. <inputtype="radio" /> :
<input type="radio" name="person-action" value="go_home" ng-model="person.action" />回家 <input type="radio" name="person-action" value="go_to_school" ng-model="person.action" />回学校通过 value 属性指定选中状态下对应的值,并通过 ng-model 将单选框与 $scope 中的属性对应,便实现了 type=”radio” 时的双向动态绑定。 2. <input type="checkbox" /> :
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="phone.play_sound" />铃声 <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="phone.play_vibrate" />震动 <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="phone.play_lights" />呼吸灯通过AngularJS 的内置指令 ng-true-value 和 ng-false-value ,指定多选框在选中和未选中状态下对应的值,再通过ng-model 将其与 $scope 中的属性对应,便实现了type=”checkbox” 的双向动态绑定。注:如果不使用 ng-true-value 和 ng-false-value ,则默认选中状态下的值为 "true" ,未选中状态下的值为 "false" 。完。
相关文章推荐
- jQuery根据ID获取input、checkbox、radio、select的示例
- jquery实现的代替传统checkbox样式插件
- asp.net动态产生checkbox(数据源为DB或内存集合)
- asp.net gridview中用checkbox全选的几种实现的区别
- asp.net treeview checkbox 相关问题
- IE中checkbox在刷新后初始化的问题
- 浅谈checkbox的一些操作(实战经验)
- asp.C#实现图片文件与base64string编码解码
- JavaScript通过this变量快速找出用户选中radio按钮的方法
- 多个datatable共存造成多个表格的checkbox都被选中
- javascript使用shift+click实现选择和反选checkbox的方法
- 用Javascript读取CheckBox数组的值的代码(兼容IE与firefox)
- javascript获取checkbox复选框获取选中的选项
- 关于树形菜单 Checkbox的全选
- javascript radio list的实现细节(多浏览器兼容)
- 利用JavaScript更改input中radio和checkbox样式
- 原生js操作checkbox用document.getElementById实现
- jquery获取radio值(单选组radio)
- 让checkbox不选中即将选中的checkbox不选中