AngularJS：3個嵌套的ng-repeat表表示形式
[英]Angularjs : 3 nested ng-repeat table representation
問題描述
我嵌套了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
我的數據結構如圖：
我不知道我的數據結構是否可行，而且我幾乎無法更改它。
有什么建議嗎？
1 個解決方案
解決方案1
2 已采納 2016-01-14 17:33:49
更新：檢查此代碼。 我在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>
AngularJS在表中嵌套ng-repeat
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.