AngularJS多选复选框如何在页面首次加载时默认选中指定值？

核心问题说明 #

你当前的代码未生效主要是因为部门列表是通过异步接口请求获取的，默认选中逻辑没有放在接口请求成功的回调中执行，执行选中逻辑时部门数据还未加载完成，无法匹配到对应项。另外模板中的属性大小写和JS中不匹配也可能导致绑定异常。

具体修改步骤 #

1. 修正模板属性大小写不匹配问题 #

你JS中定义的部门ID字段为小写id，但模板中用了大写Id，需要统一：

<!-- 把原来的value="{{ray.Id}}"修改为value="{{ray.id}}" -->
<input ng-model="ray.checked2" type="checkbox" value="{{ray.id}}" ng-click='Checked2(ray)' />

2. 修改JS逻辑，在接口数据加载完成后执行默认选中 #

修改异步请求部分的代码，按你的需求配置要默认选中的部门ID即可：

$scope.Checkedval2 = "";
$scope.CheckedId2 = "";
$scope.checkrayon = function () {
    $scope.CheckedId2 = "0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22";
    angular.forEach($scope.rayons, function (value, key) {
        value.checked2 = true;
    });
}

rayondata = [];
rayondata.push({ 'id': 0, 'title': "Choose Department... (All Departments)" });
// 配置你需要默认选中的部门ID数组，按需修改里面的ID即可
const defaultSelectedRayonIds = [0, 3, 5]; 

arkadashttp.get(arkadasservice.appOrigin + "/api/RayonApi/GetList", {})
.then(function (rdata, status) {
    // 先加载所有部门数据
    angular.forEach(rdata, function (item) {
        rayondata.push({ 'id': item.Id, 'title': item.RayonName });
    });

    let selectedIds = [];
    let selectedNames = [];
    // 遍历所有部门，匹配到默认选中ID则设置选中状态
    angular.forEach(rayondata, function(rayon) {
        if (defaultSelectedRayonIds.includes(rayon.id)) {
            rayon.checked2 = true;
            selectedIds.push(rayon.id);
            selectedNames.push(rayon.title);
            // 如果你已实现Checked2方法处理选中逻辑，这里可以直接调用 $scope.Checked2(rayon) 代替上面两行
        }
    });
    // 更新选中值变量
    $scope.CheckedId2 = selectedIds.join(',');
    $scope.Checkedval2 = selectedNames.join(',');

    // 如果你用的不是Angular原生$http发起请求，需要加这行触发视图更新，是则可以删除
    $scope.$applyAsync();
});

$scope.ProcessedNames = rayondata;
$rootScope.rayons = rayondata;
$scope.showRayon = function () {
    $scope.ShowRayon = !$scope.ShowRayon;
}

特殊场景：如果需要默认全选 #

不需要配置defaultSelectedRayonIds，直接在接口请求回调的最后调用已有的全选方法即可：

// 放在then回调的最后一行
$scope.checkrayon();

内容的提问来源于stack exchange，提问作者burak