本文也同步發表在我的公眾號“我的天空”
復選框
復選框只有兩個值：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="提交">
<input type="button" value="選中教師" 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="'Yes'" ng-false-value="'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="'Yes'" ng-false-value="'No'">{{job.label}}
</span><br>
<input type="submit" value="提交">
<input type="button" value="選中教師" 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].value=="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='Yes'，那么這樣“教師”復選框便被勾選上了。
該系列的示例代碼
https://github.com/panyongwow/angularJS