AngularJS 表单 数据绑定

demo

radio绑定

<input type="radio" name="rank" value="1" ng-model="adaptive_level">一级
<input type="radio" name="rank" value="2" ng-model="adaptive_level">二级
<input type="radio" name="rank" value="3" ng-model="adaptive_level">三级
<input type="radio" name="rank" value="4" ng-model="adaptive_level">四级
//js
$scope.adaptive_level = 2;//设置之后选中二级

效果如图：

Paste_Image.png

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