如何在AngularJS中按相同值对多个HTML表格进行分组？

我来给你梳理下在AngularJS里实现多表格按相同值分组的具体方案，亲测好用：

1. 先处理数据分组逻辑 #

首先得把你的requirements数组按目标字段（比如表格里的Group Name对应字段，假设是groupName）做分组。推荐两种实现方式，按需选择：

方法一：控制器内直接分组（快速实现） #

如果只是单个页面用，直接在控制器里用数组reduce方法处理就行：

angular.module('yourApp').controller('YourController', function($scope) {
  // 这里是你的原始业务数据
  $scope.requirements = [
    {description: '需求A', identifier: 'REQ001', lineNumber: 1, groupName: '基础功能', status: '已完成', created: '2024-05-01'},
    {description: '需求B', identifier: 'REQ002', lineNumber: 2, groupName: '基础功能', status: '进行中', created: '2024-05-02'},
    {description: '需求C', identifier: 'REQ003', lineNumber: 3, groupName: '扩展功能', status: '待启动', created: '2024-05-03'}
  ];

  // 按groupName字段分组
  $scope.groupedRequirements = $scope.requirements.reduce(function(groups, item) {
    const key = item.groupName;
    if (!groups[key]) groups[key] = [];
    groups[key].push(item);
    return groups;
  }, {});
});

方法二：自定义分组过滤器（复用性强） #

如果多个页面都需要分组功能，写个过滤器更方便：

angular.module('yourApp').filter('groupBy', function() {
  return function(items, field) {
    if (!items || !field) return items;
    const groups = {};
    items.forEach(item => {
      const key = item[field];
      if (!groups[key]) groups[key] = [];
      groups[key].push(item);
    });
    return groups;
  };
});

2. 视图层渲染分组后的表格 #

接下来在HTML里遍历分组结果，每个分组对应一个独立表格，完全保留你原来的表格样式：

用控制器分组后的渲染代码 #

<!-- 遍历每个分组 -->
<div ng-repeat="(groupName, items) in groupedRequirements">
  <!-- 显示分组标题 -->
  <h3>分组：{{ groupName }}</h3>
  <!-- 渲染该分组的表格，注意id加索引避免重复 -->
  <table class="table table-hover" id="basicTable-{{ $index }}">
    <thead>
      <tr>
        <th>Description</th>
        <th>Identifier</th>
        <th>Line Number</th>
        <th>Group Name</th>
        <th>Status</th>
        <th>Created</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="value in items track by $index">
        <td>{{ value.description }}</td>
        <td>{{ value.identifier }}</td>
        <td>{{ value.lineNumber }}</td>
        <td>{{ value.groupName }}</td>
        <td>{{ value.status }}</td>
        <td>{{ value.created }}</td>
      </tr>
    </tbody>
  </table>
</div>

用自定义过滤器的渲染代码 #

<!-- 直接通过过滤器分组 -->
<div ng-repeat="(groupName, items) in requirements | groupBy:'groupName'">
  <h3>分组：{{ groupName }}</h3>
  <table class="table table-hover" id="basicTable-{{ $index }}">
    <!-- 表格结构和上面完全一致，省略重复部分 -->
    <thead>
      <tr>
        <th>Description</th>
        <th>Identifier</th>
        <th>Line Number</th>
        <th>Group Name</th>
        <th>Status</th>
        <th>Created</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="value in items track by $index">
        <td>{{ value.description }}</td>
        <td>{{ value.identifier }}</td>
        <td>{{ value.lineNumber }}</td>
        <td>{{ value.groupName }}</td>
        <td>{{ value.status }}</td>
        <td>{{ value.created }}</td>
      </tr>
    </tbody>
  </table>
</div>

3. 额外优化建议 #

• 我把表格id改成了basicTable-{{ $index }}，避免多个表格id重复（HTML要求id唯一）
• 如果需要对分组排序，可以在控制器里对分组名称排序：

  // 对分组名称按字母/自定义规则排序
  $scope.sortedGroupNames = Object.keys($scope.groupedRequirements).sort();
  

  然后视图里遍历sortedGroupNames即可：

  <div ng-repeat="groupName in sortedGroupNames">
    <h3>分组：{{ groupName }}</h3>
    <table class="table table-hover" id="basicTable-{{ $index }}">
      <tbody>
        <tr ng-repeat="value in groupedRequirements[groupName] track by $index">
          <!-- 内容同上 -->
        </tr>
      </tbody>
    </table>
  </div>
  

这样就能完美实现按相同值拆分并展示多个表格的效果啦，完全贴合你原来的表格结构。

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