Angular/Vue多复选框勾选问题

此页面效果以Angular实现，Vue也可按照其大致流程实现，其核心本质没有改变。
功能效果为：页面初始化效果为要有所有角色的复选框，要求初始化默认勾选的角色要显示勾选，之后，能按照最终勾选的状态提交发请求。
roleList中存储的是所有角色，ownRoleList中存储的是所有要默认勾选的角色，先给所有的roleList中所有角色的属性selectedValue赋值false，然后在roleList中利用forEach方法对ownRoleList的每个角色进行匹配，如果是要默认勾选则赋值true。
初始化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
            }
        });
    }
}

后面网上也查到一种方法，也能起到勾选的作用，随便记录一下。 页面复选框需要绑定ng-click="roleNameSelection($event,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);
};

其主要思想为通过给click绑定一个事件，给这个方法传入一个id，这个参数通过action决定这个角色add或者remove出roleNameSelected数组。