AngularJS中能否用ng-repeat追加结果并合并同OrderID发票展示？

完全可以用ng-repeat实现！不过得先把你的数据按OrderID做个分组处理，直接用原始的多条目数据没法直接在表格里按订单聚合展示。我给你捋捋具体怎么做：

1. 先在控制器里完成数据分组 #

拿到Northwind的订单明细数据后，我们先把相同OrderID的条目归为一组，这样后续渲染起来更方便。修改你的控制器代码如下：

app.controller('fetchData', function($scope, $http) {
  let dynamicContent = getParameterByName('q');
  // 检查URL中是否存在参数
  if (dynamicContent) {
    $http.get('你的Northwind数据接口地址')
      .then(function(response) {
        // 初始化分组对象，用来存放按OrderID归类的订单
        $scope.groupedOrders = {};
        
        // 遍历原始数据，按OrderID分组
        response.data.forEach(item => {
          // 如果当前OrderID还没在分组对象里，就新建一个条目
          if (!$scope.groupedOrders[item.OrderID]) {
            $scope.groupedOrders[item.OrderID] = {
              orderId: item.OrderID,
              details: []
            };
          }
          // 把当前条目加入对应订单的明细数组
          $scope.groupedOrders[item.OrderID].details.push(item);
        });
        
        // 把分组对象转换成数组，方便ng-repeat遍历
        $scope.orderList = Object.values($scope.groupedOrders);
      })
      .catch(function(error) {
        console.error('获取数据失败:', error);
      });
  }
});

这里核心是把原始的扁平数据，转换成以OrderID为键、包含订单ID和对应明细数组的结构，最后转成数组让ng-repeat能直接遍历。

2. 用嵌套ng-repeat渲染表格 #

接下来在HTML里，我们可以用ng-repeat-start和ng-repeat-end来实现跨行的订单ID展示，让同一个订单的所有明细共用一个订单ID单元格：

<table border="1" style="border-collapse: collapse;">
  <thead>
    <tr>
      <th>订单ID</th>
      <th>产品名称</th>
      <th>单价</th>
      <th>数量</th>
      <th>折扣</th>
    </tr>
  </thead>
  <tbody>
    <!-- 外层ng-repeat遍历分组后的订单，ng-repeat-start标记起始行 -->
    <tr ng-repeat-start="order in orderList">
      <!-- 订单ID单元格跨行，行数等于当前订单的明细数量 -->
      <td rowspan="{{order.details.length}}" style="vertical-align: middle;">{{order.orderId}}</td>
      <!-- 渲染第一条明细的内容 -->
      <td>{{order.details[0].ProductName}}</td>
      <td>{{order.details[0].UnitPrice}}</td>
      <td>{{order.details[0].Quantity}}</td>
      <td>{{order.details[0].Discount}}</td>
    </tr>
    <!-- 内层ng-repeat渲染剩下的明细，ng-repeat-end标记结束 -->
    <tr ng-repeat-end ng-repeat="detail in order.details track by $index" ng-if="$index > 0">
      <td>{{detail.ProductName}}</td>
      <td>{{detail.UnitPrice}}</td>
      <td>{{detail.Quantity}}</td>
      <td>{{detail.Discount}}</td>
    </tr>
  </tbody>
</table>

这里的ng-repeat-start和ng-repeat-end是AngularJS专门用来处理多行重复的指令，配合rowspan就能让订单ID单元格跨越多行，视觉上更符合发票的展示逻辑。track by $index是为了避免明细条目重复时出现报错，如果你有每个明细的唯一ID（比如OrderDetailID），用那个替代$index会更稳妥。

额外小贴士 #

• 如果你不想在控制器里手动分组，也可以自定义AngularJS过滤器来做分组，但控制器分组的性能更好，因为只在数据加载时处理一次，过滤器会在每次Digest循环都执行，数据量大的时候可能有性能问题。
• 确保你的getParameterByName函数能正确解析URL参数，这样才能触发后续的数据获取逻辑。

内容的提问来源于stack exchange，提问作者Lars Rødal