如何通过使用ng-table与嵌套数组的动态数据标题一起在角JS中显示数据

Question

以下是我需要在ng -table中填充的JSON。列名应该是动态的

var data = [
          {
          "name": "abc",
          "Data": [
            {key: "FIRST_COL", value: 50},
            {key: "SECOND_COL", value: 10},
            {key: "THIRD_COL", value: 30},
            {key: "FOURTH_COL", value: 40}
          ]
          }, {
            "name": "xyz",
            "Data": [
            {key: "FIRST_COL", value: 300},
            {key: "SECOND_COL", value: 20},
            {key: "THIRD_COL", value: 400},
            {key: "FOURTH_COL", value: 60}
            ]
          }
            ];

和表应该是这样：

表结构：

FIRST_COL    SECOND_COL     THIRD_COL       FOURTH_COL
50              10              30              40
300             20              400             60

Answer 1

您可以使用ng-repeat填充数据。

演示

angular.module("app",[])
.controller("ctrl",function($scope){
$scope.tableData = [
          {
          "name": "abc",
          "Data": [
            {key: "FIRST_COL", value: 50},
            {key: "SECOND_COL", value: 10},
            {key: "THIRD_COL", value: 30},
            {key: "FOURTH_COL", value: 40}
          ]
          }, {
            "name": "xyz",
            "Data": [
            {key: "FIRST_COL", value: 300},
            {key: "SECOND_COL", value: 20},
            {key: "THIRD_COL", value: 400},
            {key: "FOURTH_COL", value: 60}
            ]
          }
            ];
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 
 <table>
  <tr>
      <td ng-repeat="val in tableData[0].Data">{{val.key}}</td>
  </tr>
  <tr ng-repeat="item in tableData">
      <td ng-repeat="val in item.Data">{{val.value}}</td>
  </tr>
 </table>
 
</div>