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

最新推荐文章于 2024-08-24 07:51:43 发布

zhu jun~

最新推荐文章于 2024-08-24 07:51:43 发布

阅读量3.9k

点赞数

文章标签： angularjs 单选按钮多选按钮动态绑定

本文链接：https://blog.csdn.net/zhujun_xiaoxin/article/details/53188338

版权

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”呢？（哈哈，初学者，一不小心就会被带到沟里哦！）