此頁面效果以Angular實現，Vue也可按照其大致流程實現，其核心本質沒有改變。 功能效果為：頁面初始化效果為要有所有角色的覆選框，要求初始化預設勾選的角色要顯示勾選，之後，能按照最終勾選的狀態提交發請求。 先查看效果：可以看到初始頁面的此用戶被賦予的角色只有一個“核算經辦”，如圖1紅框所示，點擊 ...
此頁面效果以Angular實現，Vue也可按照其大致流程實現，其核心本質沒有改變。
功能效果為：頁面初始化效果為要有所有角色的覆選框，要求初始化預設勾選的角色要顯示勾選，之後，能按照最終勾選的狀態提交發請求。 先查看效果：可以看到初始頁面的此用戶被賦予的角色只有一個“核算經辦”，如圖1紅框所示，點擊“分配角色”按鈕後，進入分配角色頁面。進入頁面初始化，可以看到頁面發起了兩個請求：fetchAllProfileRole和fetchUserRole，如圖2紅框所示。fetchAllProfileRole請求的是所有的角色，fetchUserRole請求的是已被賦予的角色，即需要預設勾選的角色 。頁面中左側也可以看到“核算經辦”這個角色的覆選框被勾選了。
圖1 初始頁面的角色只有一個核算經辦
圖2 分配角色頁面發起fetchAllProfileRole和fetchUserRole請求
圖3 fetchUserRole請求是要求預設勾選的角色，這裡即指核算經辦。
現在我們進行一次測試，我們又勾選了一個“高級查詢”的角色，然後進行提交，返回初始頁面的時候發現這個用戶已經擁有了這兩個角色，如圖4所示。再次點擊“分配角色”按鈕，發現“核算經辦”和“高級查詢”這兩個角色的覆選框被勾選了，如圖5左側覆選框所示。由此，實現了我們所需的功能。
圖4 這個用戶被賦予了“核算經辦”和“高級查詢”兩個角色
圖5 “核算經辦”和“高級查詢”的覆選框被預設勾選
roleList中存儲的是所有角色，ownRoleList中存儲的是所有要預設勾選的角色，先給所有的roleList中所有角色的屬性selectedValue賦值false，然後在roleList中利用forEach方法對ownRoleList的每個角色進行匹配，如果是要預設勾選則賦值true，經過處理後的roleList如圖6所示。roleNameSelected數組存的是最終勾選要被提交的角色id，如圖6箭頭所示。
圖6 roleList和roleNameSelected數組
初始化js部分：
1 $http.post("XXXXX/fetchAllProfileRole", params, function (data) { 2 $scope.roleList = data.responseData.data; 3 $http.post("XXXXX/fetchUserRole", formData, function (data) { 4 $scope.ownRoleList = data.responseData.data; 5 //對要預設勾選的角色做匹配 6 $scope.roleList.forEach(function (item) { 7 item.selectedValue=false; 8 $scope.ownRoleList.forEach(function (item1) { 9 if(item.roleId==item1.roleId){ 10 item.selectedValue=true; 11 } 12 }) 13 }) 14 }); 15 });View Code 初始化的時候，ng-checked的值為true的時候就會預設勾選覆選框。ng-click事件監聽每一次點擊，
item.selectedValue=!item.selectedValue;使其效果取反。假設某個覆選框初始化為勾選，之後點擊一次該覆選框，則item.selectedValue為false，即ng-checked="false"，頁面顯示不勾選。
1 <div class="roleNameAllDiv"> 2 <div ng-repeat="item in roleList"> 3 <div class="roleNameDivCtrl"> 4 <input type="checkbox" ng-click="roleNameSelection1(item)" ng-checked="item.selectedValue"/>{{item.roleName}} 5 </div> 6 </div> 7 </div>
js核心代碼如下：
1 //click點擊事件 2 $scope.roleNameSelection1= function(item) { 3 item.selectedValue=!item.selectedValue; 4 }; 5 //roleNameSelected數組存儲的是角色覆選框最終被選中的值，後面要請求提交 6 $scope.roleNameSelected=[]; 7 $scope.roleSubmit=function(){ 8 console.log("roleList:"+JSON.stringify($scope.roleList)); 9 //對所有的值進行篩選，如果符合條件的，即符合item.selectedValue==true的，則push進roleNameSelected數組。 10 $scope.roleList.forEach(function (item) { 11 if(item.selectedValue==true){ 12 console.log("item.selectedValue:"+item.selectedValue); 13 $scope.roleNameSelected.push(item.roleId); 14 } 15 }) 16 console.log("roleNameSelected:"+JSON.stringify($scope.roleNameSelected)); 17 //封裝成後臺需要的格式 18 var formData = { 19 "puId": $scope.roleInfo.puId, 20 "roleId":$scope.roleNameSelected 21 } 22 //必須要有選擇，否則給出錯誤提示 23 if($scope.roleNameSelected.length==0){ 24 $scope.errorFlag1=true; 25 $scope.selectionErrorMsg="至少選擇一個角色"; 26 }else{ 27 console.log("formData:"+JSON.stringify(formData)) 28 $http.post("XXXXX", formData, function (data) { 29 if(data){ 30 //ToDo 31 }else { 32 //ToDo 33 } 34 }); 35 } 36 }
後面網上也查到一種方法，也能起到勾選的作用，隨便記錄一下。 html頁面覆選框需要綁定ng-click="roleNameSelection($event,item.roleId)"事件和ng-checked="isSelected(item.roleId)" 事件
js核心代碼如下：
1 $scope.roleNameSelected=[]; 2 var roleNameSelected = function(action, id) { 3 if(action == 'add' && $scope.roleNameSelected.indexOf(id) == -1) $scope.roleNameSelected.push(id); 4 if(action == 'remove' && $scope.roleNameSelected.indexOf(id) != -1) $scope.roleNameSelected.splice($scope.roleNameSelected.indexOf(id), 1); 5 }; 6 $scope.roleNameSelection= function($event, id) { 7 var checkbox = $event.target; 8 var action = (checkbox.checked ? 'add' : 'remove'); 9 roleNameSelected(action, id); 10 }; 11 $scope.isSelected = function(id) { 12 return $scope.roleNameSelected.indexOf(id) >= 0; 13 };View Code
其主要思想為通過給click綁定一個事件，給這個方法傳入一個id，這個參數通過action決定這個角色add或者remove出roleNameSelected數組。over
