AngularJS ng-repeat分组需求：重复名称合并显示所有权重

我来帮你搞定这个需求～ 因为AngularJS的ng-repeat本身没法直接处理重复项的合并展示，我们需要先把数据按name分组，再渲染到表格里，具体步骤如下：

第一步：处理数据（控制器或过滤器） #

首先得把messages数组里相同name的权重归集到一起，有两种实用方式：

方式1：在控制器里直接分组 #

适合逻辑比较固定的场景，直接在你的控制器里添加这段代码：

// 假设你的messages数组示例如下
$scope.messages = [
  {name: 'asd', weight: 10},
  {name: 'asd', weight: 20},
  {name: 'asd', weight: 30},
  {name: 'xyz', weight: 15}
];

// 分组处理，把相同name的权重放到同一个数组里
$scope.groupedMessages = [];
const nameGroups = {};

angular.forEach($scope.messages, item => {
  if (!nameGroups[item.name]) {
    nameGroups[item.name] = {
      name: item.name,
      weights: []
    };
    $scope.groupedMessages.push(nameGroups[item.name]);
  }
  // 如果是要把所有权重列出来，就push进去
  nameGroups[item.name].weights.push(item.weight);
  // 如果是要求和，就改成累加：
  // nameGroups[item.name].totalWeight = (nameGroups[item.name].totalWeight || 0) + item.weight;
});

方式2：用自定义过滤器分组 #

如果需要在多个地方复用分组逻辑，可以写一个自定义过滤器：

// 在你的AngularJS模块里注册过滤器
angular.module('yourAppName').filter('groupByName', () => {
  return function(items) {
    const groups = {};
    angular.forEach(items, item => {
      if (!groups[item.name]) {
        groups[item.name] = {name: item.name, weights: []};
      }
      groups[item.name].weights.push(item.weight);
    });
    return Object.values(groups);
  };
});

第二步：修改表格模板 #

根据你的需求，把合并后的权重放到colspan="100%"的单元格里，模板可以这么写：

用控制器分组后的模板 #

<table class="table">
  <thead>
    <tr>
      <th>name</th>
      <th>weight</th>
    </tr>
  </thead>
  <tbody>
    <!-- 遍历分组后的数据 -->
    <tr ng-repeat="group in groupedMessages">
      <!-- 如果你想要把name和合并的权重放到同一个跨列单元格里 -->
      <td colspan="100%">
        {{group.name}}: {{group.weights.join(', ')}}
      </td>

      <!-- 如果是要保留两列布局，name单独一列，合并的权重在第二列 -->
      <!-- <td>{{group.name}}</td>
      <td>{{group.weights.join(', ')}}</td> -->
      <!-- 求和场景则替换为：<td>{{group.totalWeight}}</td> -->
    </tr>
  </tbody>
</table>

用自定义过滤器的模板 #

不需要修改控制器，直接在模板里用过滤器：

<table class="table">
  <thead>
    <tr>
      <th>name</th>
      <th>weight</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="group in messages | groupByName">
      <td colspan="100%">
        {{group.name}}: {{group.weights.join(', ')}}
      </td>
    </tr>
  </tbody>
</table>

这样就能实现：同一个name只显示一次，对应的所有权重合并展示在一个单元格里啦～

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