首页 > 代码库 > AngularJS（六）：表单-复选框
AngularJS（六）：表单-复选框
本文也同步发表在我的公众号“我的天空”
复选框
复选框只有两个值：true或者false，因此在AngularJS中，一般都是将复选框的ng-model绑定为一个布尔值属性，通过这两个布尔值来决定其勾选状态，以及通过其勾选状态来设置被绑定的属性值为true或false。我们来看以下示例：
<body ng-app="myApp" ng-controller="person">
<form ng-submit="submit()" name="myForm">
<p>职业:
<input type="checkbox" ng-model="user.jobs.engineer">工程师
<input type="checkbox" ng-model="user.jobs.designer">设计师
<input type="checkbox" ng-model="user.jobs.teacher">教师
</p>
<input type="submit" value="http://www.mamicode.com/提交">
<input type="button" value="http://www.mamicode.com/选中教师" ng-click="select_teacher()">
</form>
</body>
<script>
var app=angular.module("myApp",[]);
app.controller("person",function($scope){
$scope.user={jobs:{engineer:true,designer:false,teacher:false}};
$scope.submit=function(){
alert(JSON.stringify($scope.user));
};
$scope.select_teacher=function(){
$scope.user.jobs.teacher=true;
}
});
</script>
示例代码AngularJS_16.html
分析以上例子，我们添加了三个复选框来显示职业，分别是“工程师”、“设计师”和“教师”，将其的ng-model分别绑定user.jobs中的相应属性。在控制器代码中，有这样一句代码：
$scope.user={jobs:{engineer:true,designer:false,teacher:false}};
我们设置了user.jobs中各属性的初始值，其中engineer为true，其他的均为false，这样在页面加载后，“工程师”复选框是被勾选的。当然如果不需要在初始阶段设置复选框的勾选状态时，这句可以省略。但是有一点要注意的是，这两种情况，在数据提交时jobs里的值是有区别的，假设我们在页面加载后，都勾选了“工程师”与“设计师”，而不勾选“教师”的话，这个时候提交数据：
如果我们手动设置了jobs的初始值，则提交的数据为：
{"jobs":{"engineer":true,"designer":true,"teacher":false}}
如果我们没有设置jobs的初始值，则提交的数据为：
{"jobs":{"engineer":true,"designer":true}}
我们发现在第二种情况下，没有勾选的“教师”复选框绑定的teacher属性，并没有出现在提交的数据中。这点要注意。
在按钮“选中教师”中绑定的方法select_teacher（）演示了如果用代码来控制复选框的勾选，只需将绑定的属性值设置为true或false，即可做到勾选或取消勾选。
在有些情况下，我们需要更语义化的值来表达true或false，譬如我们希望为“Yes”和“No”，那么只需在复选框中添加以下指令：
ng-true-value="http://www.mamicode.com/‘Yes‘" ng-false-value="http://www.mamicode.com/‘No‘"
请注意双引号中的单引号不能省略。
在实际应用中，我们的复选框很有可能是从后台数据中获取并动态组织的，这样就要使用ng-repeat，我们将以上的例子做相应的更改来模拟该场景。请看以下代码：
<body ng-app="myApp" ng-controller="person">
<form ng-submit="submit()" name="myForm">
<span ng-repeat="job in user.jobs">
<input type="checkbox" ng-model="job.selected" ng-true-value="http://www.mamicode.com/‘Yes‘" ng-false-value="http://www.mamicode.com/‘No‘">{{job.label}}
</span><br>
<input type="submit" value="http://www.mamicode.com/提交">
<input type="button" value="http://www.mamicode.com/选中教师" ng-click="select_teacher()">
</form>
</body>
<script>
var app=angular.module("myApp",[]);
app.controller("person",function($scope){
$scope.user={jobs:[{label:‘工程师‘,value:‘engineer‘,selected:‘Yes‘},
{label:‘设计师‘,value:‘designer‘,selected:‘No‘},
{label:‘教师‘,value:‘teacher‘,selected:‘No‘}]};
$scope.submit=function(){
alert(angular.toJson($scope.user.jobs));
};
$scope.select_teacher=function(){
for(var i=0;i<$scope.user.jobs.length;i++){
if($scope.user.jobs[i].valuehttp://www.mamicode.com/=="teacher"){
$scope.user.jobs[i].selected=‘Yes‘;
return false;
}
}
}
});
</script>
示例代码AngularJS_17.html
我们来分析一下以上代码，比较与之前的代码的不同之处。我们把复选框放在一个span内，设置span的ng-repeat指令，从user.jobs中遍历对象，依次展示复选框。复选框的勾选状态由job.selected来指定，并且指定了ng-true-value与ng-false-value，而复选框上显示的文字则有job.label来指定。
在控制器代码中，我们声明了一个数组对象jobs，来存放各职业的名称（value）、显示文字（label）、以及初始勾选状态(selected)。
在submit提交代码中需要注意的是我们使用了angularjs自带的方法angular.toJson（）来将jobs对象序列化成json，而不是之前的JSON.stringipy（）方法。两者的区别在于由于在示例汇总，我们是用no-repeat的方式来显示复选框的，因此angularjs会在job对象中添加内在的属性“$$hashKay”，而该属性对于我们的实际的应用是不需要的，而angular.toJson（）方法则可以去除这种被自动添加的内在属性，使得提交数据与我们的应用一致。
在处理“选中教师”的select_teacher（）方法中，我们遍历jobs，查找value值等于“teacher”的job对象，将其的seleted属性更改为“Yes”，由于我们已经设置了复选框的ng-true-value=http://www.mamicode.com/‘Yes‘，那么这样“教师”复选框便被勾选上了。
该系列的示例代码
https://github.com/panyongwow/angularJS
AngularJS（六）：表单-复选框