如何在不使用angular-filter时，用AngularJS ng-repeat按ID分组展示数据？

嘿，我来帮你搞定这个需求！不用依赖angular-filter，咱们纯靠Angular原生指令和JavaScript就能实现按ID分组展示表格，我给你分步骤拆解：

第一步：在控制器里处理数据分组 #

首先得把原始JSON数组按ID分组，用JavaScript的reduce方法就能轻松搞定。假设你的原始数据是类似这样的结构（可以替换成你实际的JSON数据）：

// 示例原始数据
$scope.items = [
  { id: 1, name: "商品A", type: "电子产品" },
  { id: 1, name: "商品B", type: "电子产品" },
  { id: 2, name: "商品C", type: "家居用品" },
  { id: 2, name: "商品D", type: "家居用品" },
  { id: 3, name: "商品E", type: "服饰" }
];

// 按ID分组的核心逻辑
$scope.groupedByID = $scope.items.reduce(function(grouped, item) {
  // 以ID作为分组键，加个前缀让分组标题更直观，也可以直接用item.id当键
  const groupKey = `ID: ${item.id}`;
  // 如果当前分组不存在，先初始化一个空数组
  if (!grouped[groupKey]) {
    grouped[groupKey] = [];
  }
  // 把当前数据项加入对应分组
  grouped[groupKey].push(item);
  return grouped;
}, {});

如果需要按ID排序分组，可以把分组后的对象转成排序后的数组：

// 转成按ID升序排列的分组数组
$scope.sortedGroups = Object.keys($scope.groupedByID)
  .sort((a, b) => {
    // 提取ID数字进行排序
    return parseInt(a.split(' ')[1]) - parseInt(b.split(' ')[1]);
  })
  .map(key => ({ key: key, items: $scope.groupedByID[key] }));

第二步：在模板里渲染分组表格 #

接下来用Angular的ng-repeat指令渲染表格，用ng-repeat-start和ng-repeat-end处理分组标题行和内容行，结构会更清晰：

不排序的版本 #

<table style="border-collapse: collapse; width: 100%;">
  <thead>
    <tr style="background-color: #f5f5f5;">
      <th style="border: 1px solid #ddd; padding: 8px;">ID</th>
      <th style="border: 1px solid #ddd; padding: 8px;">名称</th>
      <th style="border: 1px solid #ddd; padding: 8px;">类型</th>
    </tr>
  </thead>
  <tbody>
    <!-- 遍历每个分组 -->
    <tr ng-repeat-start="(groupKey, items) in groupedByID" style="background-color: #e9e9e9;">
      <!-- 分组标题行，合并所有列 -->
      <td colspan="3" style="border: 1px solid #ddd; padding: 8px; font-weight: bold;">{{ groupKey }}</td>
    </tr>
    <!-- 遍历分组下的每个数据项 -->
    <tr ng-repeat-end ng-repeat="item in items">
      <td style="border: 1px solid #ddd; padding: 8px;">{{ item.id }}</td>
      <td style="border: 1px solid #ddd; padding: 8px;">{{ item.name }}</td>
      <td style="border: 1px solid #ddd; padding: 8px;">{{ item.type }}</td>
    </tr>
  </tbody>
</table>

排序后的版本 #

如果用了上面的sortedGroups，模板改成这样：

<table style="border-collapse: collapse; width: 100%;">
  <thead>
    <tr style="background-color: #f5f5f5;">
      <th style="border: 1px solid #ddd; padding: 8px;">ID</th>
      <th style="border: 1px solid #ddd; padding: 8px;">名称</th>
      <th style="border: 1px solid #ddd; padding: 8px;">类型</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat-start="group in sortedGroups" style="background-color: #e9e9e9;">
      <td colspan="3" style="border: 1px solid #ddd; padding: 8px; font-weight: bold;">{{ group.key }}</td>
    </tr>
    <tr ng-repeat-end ng-repeat="item in group.items">
      <td style="border: 1px solid #ddd; padding: 8px;">{{ item.id }}</td>
      <td style="border: 1px solid #ddd; padding: 8px;">{{ item.name }}</td>
      <td style="border: 1px solid #ddd; padding: 8px;">{{ item.type }}</td>
    </tr>
  </tbody>
</table>

原理说明 #

• 用reduce方法把原始数组转换成以ID为键的对象，每个键对应同一ID的元素数组，完成数据分组。
• 用ng-repeat-start和ng-repeat-end实现分组标题和内容行的嵌套渲染，每个分组先显示标题行，再展示该分组下的所有数据行。
• 排序逻辑则是把分组对象转成数组后，提取ID数字进行升序排列，确保分组顺序符合预期。

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