Question

我有如下所示的嵌套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

我的数据结构图片：

我不知道我的数据结构是否可行，我几乎无法改变它。

有任何建议吗？

Answer 1

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

中添加了新变量

＆＃13;

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];
});

＆＃13;

<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>

＆＃13;

Plunker

Angularjs：3个嵌套的ng-repeat表表示

1 个答案: