使用 ng-repeat angularjs 在表中应用行跨度答案

【问题标题】：Applying rowspan in table with ng-repeat angularjs使用 ng-repeat angularjs 在表中应用行跨度
【发布时间】：2019-08-01 13:53:55
【问题描述】：

我有这样的数组

$scope.orderno=[
{"orderno":1254,"weight":25875,"group":5},
{"orderno":56787,"weight":25875,"group":5},
{"orderno":567,"weight":25875,"group":3},
{"orderno":123254,"weight":25875,"group":3}
];

现在我想在 html 中显示如下

我试过了，但我不能。我在下面附上了我尝试过的代码。

<div ng-app>
  <table ng-controller="MainCtrl">
    <thead>
      <div>
        <tr>
          <td>orderno</td>
          <td>weight</td>
          <td rowspan={{orderwt}}>group</td>
        </tr>
      </div>
    </thead>
    <tbody ng-repeat="item in orderno">
      <tr>
        <td></td>       
        <td></td>
        <td rowspan="{{orderno.length}}">{{item.group}}</td>
      </tr>
      <tr>
        <td>{{item.orderno}}</td>     
        <td>{{item.weight}}</td>
      </tr>
    </tbody>
  </table>
</div>

我试过了，但我找不到正确的答案

【问题讨论】：

数组中的那些项目是否已经在group键上排序和分组？
您的数据结构与您希望视图的外观完全不匹配。您需要不同的数据结构。转换您的数据，使其看起来像这样：$scope.orderno={ "5" : [ {"orderno":1254,"weight":25875}, {"orderno":56787,"weight":25875} ], "3" : [ {"orderno":567,"weight":25875}, {"orderno":123254,"weight":25875} ] } 然后您会发现它更容易迭代。
是的，已经下单了，但是有重复项
@JeremyThille ok.r 告诉我如何迭代你的结构
嗯，不 :) 我已经用正确的数据结构给了你一个强有力的提示，现在轮到你尝试一下了。这种结构应该更容易，因为它与您的 HTML 视图相匹配。

标签： javascript angularjs html-table angularjs-ng-repeat

【解决方案1】：

您应该做的第一件事是将数据转换为更易于迭代的格式。例如，您可以使用array.reduce() 来帮助您创建一个以组号为键的新对象。然后你可以遍历这个对象来创建你的表。

参见下面带有 cmets 的示例 sn-p：

// This is your original data array
let arr = [{
      "orderno": 1254,
      "weight": 25875,
      "group": 5
    },
    {
      "orderno": 56787,
      "weight": 25875,
      "group": 5
    },
    {
      "orderno": 567,
      "weight": 25875,
      "group": 3
    },
    {
      "orderno": 123254,
      "weight": 25875,
      "group": 3
    }
  ],  // Use reduce and Object.create to make a new object keyed by group number
  result = arr.reduce(function(r, a) {
    r[a.group] = r[a.group] || [];
    r[a.group].push(a);
    return r;
  }, Object.create(null));

let app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $scope.groups = result;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <table border="1">
    <thead>
      <td>Group</td>
      <td>Order No</td>
      <td>Weight</td>
    </thead>
    <tbody ng-repeat="(key, value) in groups">  <!-- Outer loop -->
      <tr ng-repeat="group in value"> <!-- Inner loop -->
        <td ng-if="$index == 0" rowspan="{{ value.length }}">{{ group.group }}</td> 
        <!-- the above is so we only add the rowspan once -->
        <td>{{ group.orderno }}</td>
        <td>{{ group.weight }}</td>
      </tr>
    </tbody>
  </table>

</div>

【讨论】：