gpt4 book ai didi

javascript - Angular js : 3 nested ng-repeat table representation

转载 作者:行者123 更新时间:2023-12-02 15:11:07 25 4
gpt4 key购买 nike

我嵌套了 ng-repeats,如下所示:

<table class="table table-striped table-bordered" border=1>
<tbody ng-repeat="list in globalList">
<tr ng-repeat="child in list">
<td ng-repeat="baby in child">
{{baby.second}}
</td>
</tr>
</tbody>
</table>

我想要一个表格作为 baby.title 属性的标题和数据 baby.second

看起来像这样的东西:

|baby.title | baby.title | ... |    ->HEADERS
--------------------------------
|baby.second| baby.second| ... |
|baby.second| baby.second| ... |
|baby.second| baby.second| ... | ->DATAS

图中我的数据结构:

enter image description here

我不知道我的数据结构是否可能,而且我几乎无法更改它。

有什么建议吗?

最佳答案

更新:检查此代码。我在 JS $scope.longestArray

中添加了新变量

var app = angular.module('app', []);

app.controller('ctrl', function($scope) {
$scope.globalList = [
[
[{
'second': "dataAA",
'title': "titleA"
}, {
'second': "dataAB",
'title': "titleA"
}]
],
[
[{
'second': "dataBA",
'title': "titleB"
}, {
'second': "dataBB",
'title': "titleB"
}, {
'second': "dataBC",
'title': "titleB"
}]
],
[
[{
'second': "dataCA",
'title': "titleC"
}]
]
];
$scope.longestArray = angular.copy($scope.globalList).sort(function(a, b) {
return b[0].length - a[0].length;
})[0][0];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app" ng-controller="ctrl">
<table>
<thead>
<tr>
<th ng-repeat="list in globalList">
{{list[0][0].title}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="baby in longestArray">
<td ng-repeat="list in globalList">
{{list[0][longestArray.indexOf(baby)].second}}
</td>
</tr>
</tbody>
</table>
</body>

Plunker

关于javascript - Angular js : 3 nested ng-repeat table representation,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34795232/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com