2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > AngularJS中单选按钮和多选框的动态绑定

AngularJS中单选按钮和多选框的动态绑定

时间:2021-10-18 13:37:28

相关推荐

AngularJS中单选按钮和多选框的动态绑定

AngularJS中的单选按钮的动态绑定十分简单,写法如下:

<input type="radio" name="sex" value="man" ng-model="sex">男<input type="radio" name="sex" value="women" ng-model="sex">女

比如,我们想默认选中性别男的单选按钮,我们只需要在scope中给sex赋值为man,即$scope.sex = "man"就行。也就是说我们绑定的模型的值,只需要和value的值相同时,这个单选按钮就会被选中。

现在,你应该知道怎么选中性别nv的按钮了吧,我们只需要令$scope.sex="women"即可。

AngularJS中多选框的动态绑定

多选框的动态绑定也是十分的简单,我们只需要明白下面的道理:

1、多选框的动态绑定中必须要用到的三个指令:

- ng-true-value

多选框选中时得到的值

- ng-false-value

多选框未选中时得到的值

- ng-model

和多选框的值绑定的作用域的变量

下面再看一个例子,你就能明白了:

<!DOCTYPE html><html ng-app="myApp"><head><meta charset="UTF-8"><title>radio & checkbox</title><script type="text/javascript" src="../js/angular.min.js"></script></head><body><input type="radio" name="sex" value="male" ng-model="person.sex" />男<input type="radio" name="sex" value="female" ng-model="person.sex" />女<input type="text" ng-model="person.sex" /><input type="checkbox" ng-true-value="'pingpang'" ng-false-value="false" ng-model="person.like.pingpang" />乒乓球<input type="checkbox" ng-true-value="'football'" ng-false-value="false" ng-model="person.like.football" />足球<input type="checkbox" ng-true-value="'basketball'" ng-false-value="false" ng-model="person.like.basketball" />篮球<span>{{ person.like.pingpang }} {{ person.like.football }} {{ person.like.basketball }} </span></body></html><script type="text/javascript">var app = angular.module('myApp', []);</script>

在这个例子中,我们勾选“乒乓球”时,会输出”pingpang”,取消勾选时会输出”false”。篮球和足球呈现相同的效果。

下面,还有一个思考题,如果你能想明白,说明你多选绑定你已经完全理解了。

多选有选中和非选中状态,刚进页面的是非选中转台,为什么不输出”false”呢?(哈哈,初学者,一不小心就会被带到沟里哦!)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。