AngularJS的雙向綁定，很容易的將 input 與 json的資料直接綁定，但是多筆的checkbox時，卻不是小喵想像中，直接將項目綁上去即可，必須要寫一小小段 function 來處理 checkbox click 時的相關動作。小喵特別筆記下來，以利未來使用時方邊翻閱，也提供給朋友們參考。
緣起
AngularJS的雙向綁定，很容易的將 input 與 json的資料直接綁定，但是多筆的checkbox時，卻不是小喵想像中，直接將項目綁上去即可，必須要寫一小小段 function 來處理 checkbox click 時的相關動作。小喵特別筆記下來，以利未來使用時方邊翻閱，也提供給朋友們參考。
需求說明
小喵以使用者挑選身分角色來當作範例，待挑選的角色有【["guest","user","customer","admin"]】，勾選的結果，放在user.Roles裡面
Controller
Controller的部分，兩個資料的初始設定，以及一個 function 處理每個 checkbox 的 click 事件，相關程式內容如下：
var myApp = angular.module('myApp', []);
myApp.controller('ChkCtrl', function () {
var self = this;
//CheckBox選項
self.Roles = ["guest", "user", "customer", "admin"];
//使用者預設
self.user = { "UserName": "topcat", "Roles": [] };
//點選Checkbox
self.chkClick = function (Role) {
//取得傳入的角色在user.Roles的Index
var idx = self.user.Roles.indexOf(Role);
if (idx > -1) {
//無
self.user.Roles.splice(idx, 1);
}
else
{
self.user.Roles.push(Role);
}
};
});
View
畫面上，以最簡單的方式呈現，將 checkbox 透過 ng-repeat 將 Roles裡面的項目呈現出來，並且設定每個 checkbox 的 ng-click 啟動 chkClick
相關內容如下：
<div ng-controller="ChkCtrl as CCtrl">
{{CCtrl.Roles}}
<br />
<label ng-repeat="Role in CCtrl.Roles">
<input type="checkbox" ng-bind="CCtrl.user.Roles" value="{{Role}}" ng-click="CCtrl.chkClick(Role)" />{{::Role}}<br />
</label>
<br />
{{CCtrl.user.Roles}}
</div>
畫面呈現結果如下：
簡單的範例，自己筆記，也提供大家參考
^_^
補充：(2015/11/02)
以上的方式，在一開始的資料無法綁定，後續也需要透過function來新增移除勾選的項目
後來小喵又試了另一個方式，可以直接綁定資料，補充如下：
畫面：
<div>
{{1+2}}
<hr />
</div>
<div ng-controller="ChkController as CCtrl">
FirstName:<input type="text" ng-model="CCtrl.user.FirstName" /><br>
LastName: <input type="text" ng-model="CCtrl.user.LastName" /><br>
{{CCtrl.user.FirstName + ' ,' + CCtrl.user.LastName}}
<hr />
<label ng-repeat="r in CCtrl.user.Roles">
<input type="checkbox" ng-model="r.selected" ng-true-value="true" ng-false-value="false">{{r.name}}<br />
</label>
{{CCtrl.user.Roles}}
</div>
Script：
var myApp = angular.module('myApp',[]);
myApp.controller('ChkController',function(){
var self=this;
self.user = {"FirstName":"topcat", "LastName":"Yen", "Tel":"1234","Roles":[{"name":"User","selected":true},{"name":"Guest","selected":false},{"name":"Member","selected":false},{"name":"Admin","selected":true}]};
//self.Roles=["User","Guest","Admin","Member"];
});
測試範例：
測試範例在此
http://plnkr.co/edit/V1d33pu1jO0EKD0fTrbm?p=preview
補充後記：
相對於第一個方式，小喵個人覺得第二個方式應該比較合式，資料直接雙向綁定。
筆記下來，提供自己未來查詢，也提供大家參考
^_^
以下是簽名：
- 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
| Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |