如何在AngularJS容器中分组checkbox并实现参考图指定样式

嘿，我完全懂你想在AngularJS容器里给checkbox做分组并实现特定样式的需求——之前我做后台管理界面的时候也遇到过一模一样的问题，一开始只能堆出一堆checkbox，完全没分组样式，后来折腾出了一套可行的方案，分享给你！

第一步：先把数据改成分组结构 #

AngularJS是数据驱动的，所以首先得把你的checkbox数据按分组整理好，这样后续渲染才方便。比如：

// 在你的AngularJS控制器里定义分组数据
$scope.checkboxGroups = [
  {
    groupName: "基础功能设置",
    selectAll: false, // 可选：用来做分组全选
    options: [
      { label: "开启消息通知", value: "enableNotify", checked: false },
      { label: "自动保存草稿", value: "autoSave", checked: true },
      { label: "夜间模式", value: "darkMode", checked: false }
    ]
  },
  {
    groupName: "权限管理",
    selectAll: false,
    options: [
      { label: "允许编辑内容", value: "editPermission", checked: false },
      { label: "允许删除内容", value: "deletePermission", checked: false },
      { label: "允许导出数据", value: "exportPermission", checked: true }
    ]
  }
];

第二步：用嵌套ng-repeat渲染分组结构 #

接下来在HTML模板里，通过两层ng-repeat来遍历分组和每个分组里的checkbox，同时搭建好样式的结构：

<!-- 外层容器 -->
<div class="checkbox-group-wrapper">
  <!-- 遍历每个分组 -->
  <div class="checkbox-group" ng-repeat="group in checkboxGroups">
    <!-- 分组标题栏（可选加全选checkbox） -->
    <div class="group-header">
      <label class="group-title-label">
        <input type="checkbox" ng-model="group.selectAll" ng-change="toggleGroupSelection(group)">
        <span>{{ group.groupName }}</span>
      </label>
    </div>
    <!-- 遍历分组内的单个checkbox -->
    <div class="checkbox-item" ng-repeat="option in group.options">
      <label>
        <input type="checkbox" ng-model="option.checked" ng-value="option.value" ng-change="updateGroupSelectStatus(group)">
        <span>{{ option.label }}</span>
      </label>
    </div>
  </div>
</div>

第三步：用CSS实现你要的样式效果 #

这一步是关键，通过CSS来给分组加边框、标题栏背景、checkbox布局，完全可以匹配你参考图的样式：

/* 外层容器样式 */
.checkbox-group-wrapper {
  max-width: 450px;
  margin: 20px;
}

/* 单个分组的容器 */
.checkbox-group {
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* 分组标题栏 */
.group-header {
  background-color: #f8f9fa;
  padding: 10px 15px;
  border-bottom: 1px solid #dcdcdc;
}

.group-title-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
}

/* 单个checkbox项 */
.checkbox-item {
  padding: 9px 15px;
  border-bottom: 1px solid #f1f1f1;
}

.checkbox-item:last-child {
  border-bottom: none;
}

.checkbox-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}

.checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

第四步：添加分组全选/反选的逻辑（可选） #

如果你需要像很多后台界面那样的分组全选功能，就在控制器里加两个函数：

// 点击分组全选框时，切换整个分组的checkbox状态
$scope.toggleGroupSelection = function(group) {
  group.options.forEach(option => {
    option.checked = group.selectAll;
  });
};

// 当单个checkbox状态改变时，更新分组全选框的状态
$scope.updateGroupSelectStatus = function(group) {
  // 检查所有选项是否都被选中
  group.selectAll = group.options.every(option => option.checked);
};

这样一套下来，不仅能实现checkbox的分组展示，样式也能完全匹配你想要的效果，而且逻辑也很清晰，后续维护起来也方便。

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