AngularJS实现复选框与数组值双向联动及表单同步更新

核心匹配规则：用复选框的value属性和数组项的sname_id字段做关联键，实现状态和数据的双向同步，两步就能搞定。 #

1. 初始化阶段自动设置复选框状态 #

页面加载完成后，先从已有数据数组里提取所有已选的sname_id，再逐个匹配复选框，给ng-model绑定的skill_set对象赋值，自动渲染选中状态：

// 注意替换成你实际的作用域和数组变量名，下面示例用$scope代表AngularJS作用域，skillData代表你的源数据数组
$scope.skill_set = {};
// 把已选的sname_id转成Set，匹配效率更高
const selectedIds = new Set(skillData.map(item => item.sname_id));
// 遍历所有业务复选框设置初始状态
document.querySelectorAll('.custom-control-input[type="checkbox"]').forEach(box => {
  const modelKey = box.id; // 对应ng-model="skill_set.xxx"里的属性名
  $scope.skill_set[modelKey] = selectedIds.has(box.value);
});
// 如果操作完视图没更新，加一句$scope.$apply()触发脏检查即可

按你给的示例数据跑这段逻辑，初始选中状态会是：

• bfsi（value=2）：选中，匹配到数组里sname_id='2'的项
• ecommerce（value=4）：选中，匹配到数组里sname_id='4'的项
• api（value=26）：未选中，数组里无对应sname_id
• game（value=23）：选中，匹配到数组里sname_id='23'的项

2. 复选框操作时同步更新数组与表单数据 #

因为你用了AngularJS的ng-model绑定，复选框勾选/取消时skill_set表单对象会自动更新，你只需要加个change监听同步源数据数组就行：

document.querySelectorAll('.custom-control-input[type="checkbox"]').forEach(box => {
  box.addEventListener('change', function() {
    const checkValue = this.value;
    if (this.checked) {
      // 勾选时：数组里没有对应项就新增，注意按你的业务需要补全scat_id、scat_name等其他字段
      const hasItem = skillData.some(item => item.sname_id === checkValue);
      if (!hasItem) {
        skillData.push({
          sname_id: checkValue,
          // 其余字段按你实际的value和分类的映射关系补全即可
        });
      }
    } else {
      // 取消勾选时：从数组里移除对应sname_id的项
      skillData = skillData.filter(item => item.sname_id !== checkValue);
    }
  });
});

小提示：如果你的复选框是动态渲染的，把监听改成事件委托的方式绑在父容器上，避免动态新增的复选框绑不上事件。

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