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部分：

$http.post("XXXXX/fetchAllProfileRole", params, function (data) {
    $scope.roleList = data.responseData.data;
    $http.post("XXXXX/fetchUserRole", formData, function (data) {
        $scope.ownRoleList = data.responseData.data;
        //對要默認勾選的角色做匹配
        $scope.roleList.forEach(function (item) {
            item.selectedValue=false;
            $scope.ownRoleList.forEach(function (item1) {
                if(item.roleId==item1.roleId){
                    item.selectedValue=true;
                }
            })
        })
    });
});

 

　　初始化的時候，ng-checked的值為true的時候就會默認勾選復選框。ng-click事件監聽每一次點擊， item.selectedValue=!item.selectedValue;使其效果取反。假設某個復選框初始化為勾選，之后點擊一次該復選框，則 item.selectedValue為 false，即ng-checked="false"，頁面顯示不勾選。

<div class="roleNameAllDiv">
    <div ng-repeat="item in roleList">
        <div class="roleNameDivCtrl">
            <input type="checkbox" ng-click="roleNameSelection1(item)" ng-checked="item.selectedValue"/>{{item.roleName}}
        </div>
    </div>
</div>

js核心代碼如下：

//click點擊事件
$scope.roleNameSelection1= function(item) {
    item.selectedValue=!item.selectedValue;
};
//roleNameSelected數組存儲的是角色復選框最終被選中的值，后面要請求提交
$scope.roleNameSelected=[];
$scope.roleSubmit=function(){
    console.log("roleList:"+JSON.stringify($scope.roleList));
    //對所有的值進行篩選，如果符合條件的，即符合item.selectedValue==true的，則push進roleNameSelected數組。
    $scope.roleList.forEach(function (item) {
        if(item.selectedValue==true){
            console.log("item.selectedValue:"+item.selectedValue);
            $scope.roleNameSelected.push(item.roleId);
        }
    })
    console.log("roleNameSelected:"+JSON.stringify($scope.roleNameSelected));
    //封裝成后台需要的格式
    var formData = {
        "puId": $scope.roleInfo.puId,
        "roleId":$scope.roleNameSelected
    }
    //必須要有選擇，否則給出錯誤提示
    if($scope.roleNameSelected.length==0){
        $scope.errorFlag1=true;
        $scope.selectionErrorMsg="至少選擇一個角色";
    }else{
        console.log("formData:"+JSON.stringify(formData))
        $http.post("XXXXX", formData, function (data) {
            if(data){
                //ToDo
            }else {
                //ToDo
            }
        });
    }
}

后面網上也查到一種方法，也能起到勾選的作用，隨便記錄一下。 html頁面復選框需要綁定ng-click="roleNameSelection($event,item.roleId)"事件和ng-checked="isSelected(item.roleId)" 事件

js核心代碼如下：

$scope.roleNameSelected=[];
var roleNameSelected = function(action, id) {
    if(action == 'add' && $scope.roleNameSelected.indexOf(id) == -1) $scope.roleNameSelected.push(id);
    if(action == 'remove' && $scope.roleNameSelected.indexOf(id) != -1) $scope.roleNameSelected.splice($scope.roleNameSelected.indexOf(id), 1);
};
$scope.roleNameSelection= function($event, id) {
    var checkbox = $event.target;
    var action = (checkbox.checked ? 'add' : 'remove');
    roleNameSelected(action, id);
};
$scope.isSelected = function(id) {
    return $scope.roleNameSelected.indexOf(id) >= 0;
};

其主要思想為通過給click綁定一個事件，給這個方法傳入一個id，這個參數通過action決定這個角色add或者remove出roleNameSelected數組。over