AngularJS：3个嵌套的ng-repeat表表示形式

Question

I have nested ng-repeats like below : 我嵌套了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>

What I'd like to have is a table as header the baby.title property and as data baby.second 我想要的是一个表，表头为baby.title属性，数据为baby.second

Something that looks like to this : 看起来像这样：

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

My data structure in picture : 我的数据结构如图：

I don't know if that's possible with my data structure tho and I can hardly change it. 我不知道我的数据结构是否可行，而且我几乎无法更改它。

Any advices ? 有什么建议吗？

Answer 1

UPDATE: Check this code. 更新：检查此代码。 I added new variable in JS $scope.longestArray 我在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 柱塞

AngularJS：3个嵌套的ng-repeat表表示形式

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-01-14 17:33:49

AngularJS：3个嵌套的ng-repeat表表示形式

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-01-14 17:33:49

解决方案1
2 已采纳 2016-01-14 17:33:49