如何从具有数组的json绑定网格

Question

我从mongoDb获得了json对象，如下所示

JsonData = [
        Number: {
                 name1 : 4,
                 name2 : 5,
                 name3 : 8,
                 name4 : 5
                },
        Sum : {
                name1 : 52,
                name2 : 55,
                name3 : 82,
                name4 : 55
               },
        Ratio : {
                name1 : 1.5,
                name2 : 5.2,
                name3 : 0.5,
                name4 : 4.2
               }
            ]

在上面的json数据中，只有数字会改变并保持全部静态，除数字外，数组不会改变。

我正在尝试将此jsonData绑定到网格，如下所示

NameTypes Number  Sum  Ratio 
+--------+------+----+-----
  name1     4     52   1.5
  name2     5     55   5.2
  name3     8     82   0.5
  name4     5     55   4.2

如何在angular.js

中绑定它

感谢您的帮助

Answer 1

应该是这样的

＆＃13;

＆＃13;

var app = angular.module('anApp', []);
app.controller('ctrl', function($scope) {
  $scope.JsonData = {
    Number: {
      name1: 4,
      name2: 5,
      name3: 8,
      name4: 5
    },
    Sum: {
      name1: 52,
      name2: 55,
      name3: 82,
      name4: 55
    },
    Ratio: {
      name1: 1.5,
      name2: 5.2,
      name3: 0.5,
      name4: 4.2
    }
  };      
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>

<div ng-app="anApp" ng-controller="ctrl">

  <table>
    <thead>
      <tr>
        <th>Type</th>
        <th ng-repeat="(key,value) in JsonData">{{key}}</th>
      </tr>
    </thead>
    <tbody ng-repeat="(key,value) in JsonData.Number">
      <tr>
        <td>{{key}}</td>
        <td ng-repeat="(key,value) in JsonData">{{value[$parent.key]}}</td>
      </tr>
    </tbody>
  </table>

</div>

＆＃13;

＆＃13;

＆＃13;