我有与此问题类似的问题: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>
最佳答案
一种选择是将主循环放在表 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>
关于javascript - 如何从 AngularJS 中的对象数组构建带有 rowspan 的表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53298599/