Angular表格(ng-repeat)中展示对象数组同类键的总计值

你需要把这个对象数组按同类项（比如name+city，毕竟同一用户的城市通常一致）分组，同时计算每组的purchase总和，再用ng-repeat展示。下面是具体的实现方案：

第一步：在控制器中处理数据（分组+求和） #

先在AngularJS控制器里对原始数组做分组、求和处理，同时兼容部分键值不一致的情况：

angular.module('myApp', [])
  .controller('GroupController', function($scope) {
    // 你的原始数据
    $scope.group = [
      { name:'Brandon Pack', city:'NY', purchase:25, accepted:true },
      { name:'Josh Vilet', city:'Memphis', purchase:30, accepted:true },
      { name:'Brandon Pack', city:'NY', purchase:62, accepted:true },
      { name:'Patrick Whiteside', city:'NY', purchase:50, accepted:false },
      { name:'Josh Vilet', city:'Memphis', purchase:50, accepted:true }
    ];

    // 处理分组与求和逻辑
    const groupedData = {};
    $scope.group.forEach(item => {
      // 用「名称+城市」作为分组标识，避免同名人不同城市的情况
      const groupKey = `${item.name}-${item.city}`;
      
      if (!groupedData[groupKey]) {
        // 初始化分组对象
        groupedData[groupKey] = {
          name: item.name,
          city: item.city,
          totalPurchase: 0,
          accepted: item.accepted,
          // 可选：保存组内所有原始条目，方便展示明细
          detailItems: []
        };
      }

      // 累加购买金额
      groupedData[groupKey].totalPurchase += item.purchase;
      // 存入原始条目
      groupedData[groupKey].detailItems.push(item);

      // 处理accept状态不一致的情况：如果组内存在不同状态，标记为混合状态
      if (groupedData[groupKey].accepted !== item.accepted) {
        groupedData[groupKey].accepted = 'mixed';
      }
    });

    // 将分组对象转为数组，供ng-repeat遍历
    $scope.groupedResults = Object.values(groupedData);
  });

第二步：用ng-repeat在视图中展示 #

在HTML视图里，遍历处理后的数组，展示分组汇总信息，也可以选择展示明细：

<div ng-app="myApp" ng-controller="GroupController">
  <h3>用户购买统计</h3>
  <div ng-repeat="group in groupedResults" style="border:1px solid #eee; padding:10px; margin:10px 0;">
    <h4>{{group.name}} ({{group.city}})</h4>
    <p>累计购买金额: <strong>{{group.totalPurchase}}</strong></p>
    <p>接受状态: 
      <span ng-if="group.accepted === true">已接受</span>
      <span ng-if="group.accepted === false">未接受</span>
      <span ng-if="group.accepted === 'mixed'">部分接受</span>
    </p>

    <!-- 可选：展开显示组内每一笔购买明细 -->
    <div>
      <button ng-click="showDetails = !showDetails">查看明细</button>
      <ul ng-show="showDetails">
        <li ng-repeat="item in group.detailItems">
          金额: {{item.purchase}} | 状态: {{item.accepted ? '已接受' : '未接受'}}
        </li>
      </ul>
    </div>
  </div>
</div>

关键细节说明 #

• 分组标识的选择：用name+city作为分组键是为了避免同名用户在不同城市的记录被错误合并，你可以根据实际业务调整（比如只按name分组）。
• 属性差异处理：如果同一组内的accepted值不一致，代码会把状态标记为mixed，并在视图中对应展示。
• 明细展示：如果需要查看每组的原始记录，保留detailItems数组，用嵌套的ng-repeat即可实现展开/收起的明细效果。

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