Html 使用Angularjs动态加载表

我试图从json动态加载一个表，但是我在遍历标记和之前的两个列表时遇到了一个问题

在下面的示例中，我使用just来模拟我将要做的事情

Json

HTML

有人有办法解决这个问题吗

---

感谢您的

而不是像这样调用列的迭代器：

column in table.Rows[0].Columns

试着这样做：

column in table.Rows[$index].Columns

---

在这一点上，我认为ng repeat不支持使用单个指令在嵌套数组上进行迭代

我能够解决这个问题的唯一方法是首先将嵌套数组展平

<table>
  <thead>
    <tr>
      <th ng-repeat="column in data[0].Rows[0].Columns" colspan="{{column.SubColumns.length}}">
        {{column.Title}}
      </th>
    </tr>
    <tr>
      <th ng-repeat="subcol in flattenedSubcols()">
        {{subcol.Title}}
      </th>
    </tr> 
  </thead>
  <tbody>
    <tr data-ng-repeat="row in data[0].Rows">
      <td data-ng-repeat="data in flattenedRowData(row)">{{data}}</td>
    </tr>
  </tbody>
</table>

这感觉有点不舒服，但它确实起作用了

---

Plunker

为什么要使用跨距？它们在tr内无效。将ng重复直接放在th或td上。将ng if放在th或td内。我使用的跨度仅模拟我想做的想法。太好了！解决了我的问题。非常感谢你！

column in table.Rows[$index].Columns

<table>
  <thead>
    <tr>
      <th ng-repeat="column in data[0].Rows[0].Columns" colspan="{{column.SubColumns.length}}">
        {{column.Title}}
      </th>
    </tr>
    <tr>
      <th ng-repeat="subcol in flattenedSubcols()">
        {{subcol.Title}}
      </th>
    </tr> 
  </thead>
  <tbody>
    <tr data-ng-repeat="row in data[0].Rows">
      <td data-ng-repeat="data in flattenedRowData(row)">{{data}}</td>
    </tr>
  </tbody>
</table>

  $rootScope.flattenedSubcols = function() {
    var subcolumns = [];
    $rootScope.data[0].Rows[0].Columns.forEach(function(col) {
      col.SubColumns.forEach(function(subcol) {
        subcolumns.push(subcol);
      });
    });
    return subcolumns; 
  };


  $rootScope.flattenedRowData = function(row) {
    var data = [];
    row.Columns.forEach(function(col) {
      col.SubColumns.forEach(function(subcol) {
        data.push(subcol.Value);
      });
    });
    return data;
  };