Angularjs : 3 nested ng-repeat table representation

Question

I have nested ng-repeats like below :

<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

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

 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 nested ng-repeat table representation

Question

1 answers

solution1
2 ACCPTED 2016-01-14 17:33:49

Angularjs : 3 nested ng-repeat table representation

Question

1 answers

solution1 2 ACCPTED 2016-01-14 17:33:49

solution1
2 ACCPTED 2016-01-14 17:33:49