如何基于年份实现Angular JS表格格式化？附获取到的响应数据

我来帮你搞定这个按年份分组展示收入数据的AngularJS表格需求！首先咱们得先把原始的扁平数据整理成按年份分组的结构，这样在视图里渲染起来会更清晰直观。

步骤1：在控制器中处理数据分组 #

首先在你的AngularJS控制器里，咱们把原始的revenueTableData转换成按年份分组的结构，同时计算每个年份的总收入。这里可以用数组的reduce方法来高效处理：

angular.module('app', [])
.controller('RevenueController', function($scope) {
  // 你的原始数据
  $scope.revenueTableData = [
    { "revenueSource": "Customer", "revenueYear": "2014", "revenueAmount": "5555" },
    { "revenueSource": "Driver", "revenueYear": "2014", "revenueAmount": "5555" },
    { "revenueSource": "Insurance", "revenueYear": "2014", "revenueAmount": "2300" },
    { "revenueSource": "Customer", "revenueYear": "2015", "revenueAmount": "8888" },
    { "revenueSource": "Driver", "revenueYear": "2015", "revenueAmount": "1111" },
    { "revenueSource": "Insurance", "revenueYear": "2015", "revenueAmount": "3400" }
    // 其他年份的数据...
  ];

  // 按年份分组并计算总和
  $scope.groupedByYear = $scope.revenueTableData.reduce(function(result, item) {
    // 把金额转成数字类型方便计算
    const amount = parseInt(item.revenueAmount);
    // 如果当前年份还没在结果里，初始化一个对象
    if (!result[item.revenueYear]) {
      result[item.revenueYear] = {
        year: item.revenueYear,
        items: [],
        total: 0
      };
    }
    // 添加当前项到对应年份的列表
    result[item.revenueYear].items.push(item);
    // 累加总金额
    result[item.revenueYear].total += amount;
    return result;
  }, {});

  // 把对象转换成数组（方便ng-repeat遍历）
  $scope.yearGroups = Object.values($scope.groupedByYear);
});

步骤2：在视图中渲染分组表格 #

接下来在HTML里，咱们用ng-repeat遍历每个年份分组，为每个年份单独渲染表格的表头、数据行和总计行：

<div ng-app="app" ng-controller="RevenueController">
  <div class="year-table" ng-repeat="yearGroup in yearGroups">
    <h3>收入统计 - {{ yearGroup.year }}年</h3>
    <table border="1" cellpadding="8" cellspacing="0">
      <thead>
        <tr>
          <th>收入来源</th>
          <th>金额</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in yearGroup.items">
          <td>{{ item.revenueSource }}</td>
          <td>{{ item.revenueAmount | number }}</td>
        </tr>
        <tr style="font-weight: bold; background-color: #f0f0f0;">
          <td>总计</td>
          <td>{{ yearGroup.total | number }}</td>
        </tr>
      </tbody>
    </table>
    <br>
  </div>
</div>

额外优化点 #

• 如果需要格式化金额为货币格式，可以把number过滤器换成currency，比如{{ item.revenueAmount | currency }}
• 可以给年份分组的表格加上自定义样式，让不同年份的表格视觉上更易区分
• 如果原始数据的金额是字符串类型，一定要转换成数字再计算总和，避免出现字符串拼接的错误

这样处理后，你的表格就会按年份分组展示，每个年份下清晰列出各收入来源的金额，还有该年份的总收入，完全符合需求！

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