[筆記][AngularJS] 多筆 CheckBox 勾選範例

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>

畫面呈現結果如下:

AngularJSCheckBox001

 

簡單的範例,自己筆記,也提供大家參考

^_^


補充:(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

補充後記:

相對於第一個方式,小喵個人覺得第二個方式應該比較合式,資料直接雙向綁定。
筆記下來,提供自己未來查詢,也提供大家參考

^_^

 


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6)