2017-05-30 41 views
1

结合网格我从MongoDB的JSON对象像下面如何从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

感谢您的帮助

+0

你想在ng-grid中使用这个JSON吗? –

+4

你有试过什么吗? – Rajesh

+0

@DavidR我试过用普通表格而不是ng-grid使用ng-repeat – jose

回答

3

它应该是这样的

这个绑定

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

+0

感谢您的回答,但第一列是像name1,name2这样的键。 – jose

+0

怎么可以在这里看到更新的答案。 –

+0

同名即将到来,只有三行即将到来,但我们在数据中发出4行甚至$ index + 1被放置 – jose