码迷,mamicode.com
首页 > Web开发 > 详细

工作积累(八)——AngularJS与单选框及多选框的双向动态绑定

时间:2015-06-26 06:55:09      阅读:19511      评论:1      收藏:0      [点我收藏+]

标签:checkbox   动态绑定   radio   angularjs   

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” 的双向动态绑定。

完。

本文出自 “细桶假狗屎” 博客,请务必保留此出处http://xitongjiagoushi.blog.51cto.com/9975742/1665752

工作积累(八)——AngularJS与单选框及多选框的双向动态绑定

标签:checkbox   动态绑定   radio   angularjs   

(12)
(6)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!