如何使用ng-table和嵌套数组的动态数据标题在角度js中显示数据

Question

下面是我需要在ng表中填充的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>