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填充数据。

演示

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: