如何在ng-repeat中每个用户最后一条采购记录后显示总计span标签

刚好遇到过类似的需求，给你两种实用的解决方案，你可以根据自己的数据情况来选：

方案一：先在控制器里分组预处理数据（推荐，性能更好） #

如果你的数据量不小，这种方式更高效，因为总额只需要计算一次，不用每次在模板里反复计算。

首先在控制器里把原数组按用户名分组，同时算出每个用户的采购总额：

angular.module('myApp', [])
.controller('PurchaseController', 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}
  ];

  // 按用户分组并计算总额
  $scope.groupedPurchases = {};
  $scope.group.forEach(item => {
    // 如果是新用户，初始化分组对象
    if (!$scope.groupedPurchases[item.name]) {
      $scope.groupedPurchases[item.name] = {
        user: item.name,
        city: item.city,
        purchases: [],
        total: 0
      };
    }
    // 添加采购记录并累加总额
    $scope.groupedPurchases[item.name].purchases.push(item);
    $scope.groupedPurchases[item.name].total += item.purchase;
  });

  // 把分组对象转成数组，方便ng-repeat遍历
  $scope.userGroups = Object.values($scope.groupedPurchases);
});

然后在模板里嵌套ng-repeat，内层遍历用户的采购记录，用$last判断是不是该用户的最后一条记录，是的话就显示总额：

<div ng-app="myApp" ng-controller="PurchaseController">
  <div ng-repeat="userGroup in userGroups">
    <div ng-repeat="purchase in userGroup.purchases">
      <!-- 展示单条采购记录的信息 -->
      <p>{{purchase.name}} | {{purchase.city}} | 采购金额: {{purchase.purchase}}</p>
      <!-- 仅在该用户最后一条记录后显示总额 -->
      <span ng-if="$last" style="color: #2ecc71; font-weight: bold;">
        👉 该用户采购总额: {{userGroup.total}}
      </span>
    </div>
    <hr> <!-- 加个分割线，区分不同用户 -->
  </div>
</div>

方案二：直接在模板中判断（适合小数据量或不想修改原数据结构） #

如果你的数据量不大，或者不想改动原有的数据结构，可以直接在模板里通过索引判断当前记录是不是该用户的最后一条，同时写个方法计算总额。

控制器里只需要加一个计算用户总额的方法：

angular.module('myApp', [])
.controller('PurchaseController', 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}
  ];

  // 计算指定用户的采购总额
  $scope.getUserTotal = function(userName) {
    return $scope.group
      .filter(item => item.name === userName)
      .reduce((total, item) => total + item.purchase, 0);
  };

  // 注意：如果你的原始数组中同一个用户的记录不是连续的，一定要先排序！
  $scope.group.sort((a, b) => a.name.localeCompare(b.name));
});

模板里的写法：

<div ng-app="myApp" ng-controller="PurchaseController">
  <div ng-repeat="item in group track by $index">
    <!-- 展示单条采购记录 -->
    <p>{{item.name}} | {{item.city}} | 采购金额: {{item.purchase}}</p>
    <!-- 判断条件：要么是数组最后一项，要么下一项的用户名和当前项不一样 -->
    <span ng-if="!group[$index + 1] || group[$index + 1].name !== item.name" style="color: #2ecc71; font-weight: bold;">
      👉 该用户采购总额: {{getUserTotal(item.name)}}
    </span>
    <hr ng-if="!group[$index + 1] || group[$index + 1].name !== item.name">
  </div>
</div>

小提醒 #

• 方案二的缺点是，每次判断都会调用计算总额的方法，如果数据量大的话会有性能损耗，所以更推荐方案一。
• 如果你的原始数组中同一个用户的记录是分散的，一定要先排序，否则方案二会在每一段该用户的记录后面都显示总额，不符合需求。

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