Angular/Vue多複選框勾選問題

　　此頁面效果以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