Question

我已经嵌套了JSON，如下所示。

{
  "Group": [
    {
      "Module1": [
        {
          "Col1": "Value1 0",
          "Col2": "Value2 0",
          "Col3": "Value3 0",
          "Col4": "Value4 0"
        },
        {
          "Col1": "Value1 1",
          "Col2": "Value2 1",
          "Col3": "Value3 1",
          "Col4": "Value4 1"
        },
        {
          "Col1": "Value1 2",
          "Col2": "Value2 2",
          "Col3": "Value3 2",
          "Col4": "Value4 2"
        }
      ]
    },
    {
      "Module2": [
        {
          "Col1": "Value1 0",
          "Col2": "Value2 0",
          "Col3": "Value3 0",
          "Col4": "Value4 0",
          "Col5": "Value5 0",
          "Col6": "Value6 0"
        },
        {
          "Col1": "Value1 1",
          "Col2": "Value2 1",
          "Col3": "Value3 1",
          "Col4": "Value4 1",
          "Col5": "Value5 1",
          "Col6": "Value6 1"
        },
        {
          "Col1": "Value1 2",
          "Col2": "Value2 2",
          "Col3": "Value3 2",
          "Col4": "Value4 2",
          "Col5": "Value5 2",
          "Col6": "Value6 2"
        },
        {
          "Col1": "Value1 3",
          "Col2": "Value2 3",
          "Col3": "Value3 3",
          "Col4": "Value4 3",
          "Col5": "Value5 3",
          "Col6": "Value6 3"
        }
      ]
    }
  ]
}

我将有两个标签Module1和Module2 当用户选择Module1时，必须使用Module1相关数据来创建如下所示的表格。

=============================================
|  Col1    |   Col2   |   Col3   |   Col4   |
=============================================
| Value1 0 | Value2 0 | Value3 0 | Value4 0 |
| Value1 1 | Value2 1 | Value3 1 | Value4 1 |
| Value1 2 | Value2 2 | Value3 2 | Value4 2 |
=============================================

请注意，表列是动态的。所有模块的列数不会相同，我不知道我将获得哪个列名作为响应。

请帮我创建一张桌子。我尝试使用ng-repeat但是当我选择Module1

时，我只获得了最后的数据

“Col4”：“Value4 2”

更新：

检查Plunker

http://plnkr.co/edit/K77lRZOS2RuF4X8orzTk?p=preview

Answer 1

更新

<table class="table" ng-repeat="(moduleName, dataset) in myJson.group">
    <thead>
        <tr>
            <th ng-repeat="(colName, colValue) in dataset[0]" ng-bind="colName"></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="dataObj in dataset">
            <td ng-repeat="(colName, colValue) in dataObj" ng-bind="colValue"></td>
        </tr>
    </tbody>
</table>

这应该是朝着正确方向发展的。

拥有一个大型数据集，例如。由于您创建的所有$$观察者，ng-repeat是一个巨大的性能瓶颈，我建议使用网格插件进行虚拟化，例如uiGrid。

使用AngularJS ng-repeat基于嵌套JSON创建动态表

1 个答案: