如何在Angular或JavaScript中实现按Label分组的动态复选框列表

没问题，我来帮你搞定这两个需求！不管是用纯JavaScript还是Angular，都有清晰的实现方式，咱们一步步来：

一、数组转目标结构对象 #

首先处理数组结构转换，核心是用reduce方法来分组生成目标对象，纯JS和Angular（TypeScript）都能用这个逻辑：

纯JavaScript实现 #

const data = [
  { name: 'Pear', value: 'pear', label: 'Fruit' },
  { name: 'Plum', value: 'plum', label: 'Fruit' },
  { name: 'Kiwi', value: 'kiwi', label: 'Fruit' },
  { name: 'Brinjal', value: 'Brinjal', label: 'Vegetable' },
  { name: 'Cabbage', value: 'Cabbage', label: 'Vegetable' }
];

const groupedObj = data.reduce((acc, item) => {
  // 如果当前label还没在累加器里，先初始化一个空对象
  if (!acc[item.label]) {
    acc[item.label] = {};
  }
  // 往对应label的对象里添加键值对：name作为键，value作为值
  acc[item.label][item.name] = item.value;
  return acc;
}, {});

console.log(groupedObj);
// 输出结果就是你要的结构：
// {
//   "Fruit": { "Pear": "pear", "Plum": "plum", "Kiwi": "kiwi" },
//   "Vegetable": { "Brinjal": "Brinjal", "Cabbage": "Cabbage" }
// }

Angular（TypeScript）实现 #

逻辑和纯JS完全一致，只是可以加上类型定义让代码更严谨：

interface Item {
  name: string;
  value: string;
  label: string;
}

interface GroupedResult {
  [key: string]: { [key: string]: string };
}

@Component({
  selector: 'app-checkbox-group',
  templateUrl: './checkbox-group.component.html'
})
export class CheckboxGroupComponent {
  data: Item[] = [
    { name: 'Pear', value: 'pear', label: 'Fruit' },
    { name: 'Plum', value: 'plum', label: 'Fruit' },
    { name: 'Kiwi', value: 'kiwi', label: 'Fruit' },
    { name: 'Brinjal', value: 'Brinjal', label: 'Vegetable' },
    { name: 'Cabbage', value: 'Cabbage', label: 'Vegetable' }
  ];

  groupedObj: GroupedResult = {};

  ngOnInit() {
    this.groupedObj = this.data.reduce((acc: GroupedResult, item: Item) => {
      if (!acc[item.label]) {
        acc[item.label] = {};
      }
      acc[item.label][item.name] = item.value;
      return acc;
    }, {});
  }
}

二、页面展示分组复选框 #

纯JavaScript（原生DOM）实现 #

如果不用框架，我们可以先转换数组，再动态生成DOM元素：

// 先拿到上面转换好的groupedObj
const container = document.getElementById('checkbox-container');

// 遍历每个分组
for (const [label, items] of Object.entries(groupedObj)) {
  // 创建分组标题
  const groupTitle = document.createElement('h3');
  groupTitle.textContent = `Label - ${label}`;
  container.appendChild(groupTitle);

  // 创建复选框容器
  const checkboxWrapper = document.createElement('div');
  
  // 遍历当前分组的每个选项
  for (const [name, value] of Object.entries(items)) {
    const checkboxItem = document.createElement('div');
    
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.name = name;
    checkbox.value = value;
    
    const labelEl = document.createElement('label');
    labelEl.textContent = name;
    labelEl.htmlFor = name; // 关联复选框
    
    checkboxItem.appendChild(checkbox);
    checkboxItem.appendChild(labelEl);
    checkboxWrapper.appendChild(checkboxItem);
  }
  
  container.appendChild(checkboxWrapper);
}

对应的HTML只需要一个容器：

<div id="checkbox-container"></div>

Angular实现 #

Angular里可以直接用模板语法*ngFor来实现分组展示，不需要手动操作DOM：

首先在组件里先获取分组的键（比如Fruit、Vegetable），可以加一个计算属性：

get groupLabels(): string[] {
  return Object.keys(this.groupedObj);
}

然后在模板里这样写：

<div *ngFor="let label of groupLabels" class="checkbox-group">
  <h3>Label - {{ label }}</h3>
  <div *ngFor="let item of groupedObj[label] | keyvalue" class="checkbox-item">
    <input type="checkbox" [name]="item.key" [value]="item.value" id="{{ item.key }}">
    <label [for]="item.key">{{ item.key }}</label>
  </div>
</div>

这里用了Angular的keyvalue管道来遍历对象的键值对，非常方便。你还可以加一些CSS来美化分组样式，比如给.checkbox-group加margin，.checkbox-item加行间距等。

这样就能完美实现你要的两个需求啦！

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