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"是表示是否毕业的一组单选按钮。

巴特西

angularjs中的单选框绑定数据注意事项

最新文章

热门文章