如何从AngularJS中的对象数组中构建具有行跨度的表答案

【问题标题】：How to build table with rowspan from array of objects in AngularJS如何从AngularJS中的对象数组中构建具有行跨度的表
【发布时间】：2019-04-17 07:47:43
【问题描述】：

我有与这个问题类似的问题：AngularJS repeat with table and rowspan。

我想用对象的行跨度构建表。

但我使用对象数组而不是单个对象作为表格数据。

示例：

[
    {
        "key": "key 1",
        "values": [
                {
                    "value": "value-1"
                },
                {
                    "value": "value-2",
                }
            ]
        },
        {
            "key": "key 2",
            "values": [
                {
                    "value": "value-3"
                }
            ]
        }

而不是

{
    key1:[1,2],
    key2:[3,4,5]
}

因此我想转换这个数组：

[
    {
        "login": "Affiliate 1",
        "referrals": [
            {
                "login": "referral-1",
                "bonusAmount": 100.00
            },
            {
                "login": "referral-2",
            }
        ]
    },
    {
        "login": "Affiliate 2",
        "referrals": [
            {
                "login": "referral-3",
                "bonusAmount": 300.00
            }
        ]
    },
    {
        "login": "Affiliate 3",
        "referrals": [
            {}
        ]
    }
]

到表：

<table border="1">
  <tr>
    <th scope="col">Affiliate name</th>
    <th scope="col">Referral name</th>
    <th scope="col">Affiliate bonus</th>
  </tr>
  <tr>
    <td rowspan="2">Affiliate 1</td>
    <td>referral-1</td>
    <td>$100.00</td>
  </tr>
  <tr>
    <td>referral-2</td>
    <td></td>
  </tr>
  <tr>
    <td>Affiliate 2</td>
    <td>referral-3</td>
    <td>$300.00</td>
  </tr>
  <tr>
    <td>Affiliate 3</td>
    <td></td>
    <td></td>
  </tr>
</table>

【问题讨论】：

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

【解决方案1】：

一种选择是将主循环放在表 ng-repeat="item in items" 中的 tbody 元素上，然后在每个 tr ng-repeat="ref in item.referrals" 上使用嵌套循环，其中将行跨度条件放在第一个 td <td ng-if="$index == 0" rowspan={{item.referrals.length}}>{{item.login}}</td> 上。

这是一个工作示例

var app = angular.module('app', []);
app.controller('ctrl', function ($scope) {
   $scope.items = [
    {
        "login": "Affiliate 1",
        "referrals": [
            {
                "login": "referral-1",
                "bonusAmount": 100.00
            },
            {
                "login": "referral-2",
            }
        ]
    },
    {
        "login": "Affiliate 2",
        "referrals": [
            {
                "login": "referral-3",
                "bonusAmount": 300.00
            }
        ]
    },
    {
        "login": "Affiliate 3",
        "referrals": [
            {}
        ]
    }
  ];
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">


<table border="1">
  <tr>
    <th>Affiliate name</th>
    <th>Referral name</th>
    <th>Affiliate bonus</th>
  </tr>
  <tbody ng-repeat="item in items">
    <tr ng-repeat="ref in item.referrals">
      <td ng-if="$index == 0" rowspan={{item.referrals.length}}>{{item.login}}</td>
      <td>{{ref.login}}</td>
      <td>{{ref.bonusAmount > 0 ? '$' + ref.bonusAmount:''}}</td>
    </tr>
  </tbody>
</table>

</div>

【讨论】：