渲染表动态标题

Question

我要渲染动态标题的表，我的意思是，我不想做这样的事情在HTML

<table> 
     <tr> 
      // THIS TABLE ROW IS WHAT I SAY 
      <th>here info</th> 
      <th>something here</th> 
      <th>another header</th> 
     </tr> 
     <tr ng-repeat="thing in things"> 
      <td>{{thing.asfs}}</td> 
      <td>{{thing.asx}}</td> 
      <td>{{person.dsf}}</td> 
     </tr> 
    </table> 

我想是这样的

<table> 
    <tr ng-repeat="head in heads"> 
     {{head}} 
    </tr> 
    <tr ng-repeat="bar in bars"> 
     <td ng-repeat="foo in foos"></td> 
    </tr> 
</table> 

，这只是一个例子，我需要这个数据来做到这一点：

{ 
    "55f6de98f0a50c25f7be4db0":{ 
     "clicks":{ 
     "total":144, 
     "real":1 
     }, 
     "conversions":{ 
     "total":4, 
     "amount":229 
     }, 
     "cost":{ 
     "cpc":0.1999999999999995, 
     "ecpc":1145.0000000000027, 
     "total":28.79999999999993 
     }, 
     "revenue":{ 
     "total":4, 
     "epc":0.027777777777777776 
     }, 
     "net":{ 
     "roi":-1.1612903225806457, 
     "total":4 
     }, 
    "name":"Traffic Source #2", 
    },  
    "55f6de98f0a50c25f7be4dbOTHER":{ 
     "clicks":{ 
     "total":144, 
     "real":1 
     }, 
     "conversions":{ 
     "total":4, 
     "amount":229 
     }, 
     "cost":{ 
     "cpc":0.1999999999999995, 
     "ecpc":1145.0000000000027, 
     "total":28.79999999999993 
     }, 
     "revenue":{ 
     "total":4, 
     "epc":0.027777777777777776 
     }, 
     "net":{ 
     "roi":-1.1612903225806457, 
     "total":4 
     } 
    "name":"Traffic Source #3" 
    }, 

} 

每一个关键，例如点击次数，转换成本，E tc，应该是td，这只是我不想要静态HTML。

有什么建议吗？

编辑

，并且有时该对象将增长，能想出这样一个55f6de98f0a50c25f7be4db0

一些键我没有这个拨弄着完全相同的数据我收到

http://jsfiddle.net/wLkz45qj/

Answer 1

更新： 你需要做的是首先将你不方便的对象转换为对象数组wi TH结构简单，然后用我的代码，即

{ 
a: { 
    b:{ 
    c: 'x' 
    } 
} 
} 

会变成

[[ a, { 'b.c' : 'x' }], ...] 

或只是

[{ _id : a , 'b.c' :'x'}, ...] 

最简单的方式做到这一点是使用lodash或下划线（检查地图，flatMap，对等）

@jperezov向你展示了核心思想，稍微详细的例子：

$scope.peopleKeys = Object.keys(people[0]) 

和

有

<table> 
    <tr> 
    <th></th> 
    <th ng-repeat="personKey in peopleKeys"> 
     {{ personKey }} 
    </th> 
    </tr> 

    <tr ng-repeat='p in people'> 
     <th>{{ $index }}</th> 
     <td ng-repeat="personKey in peopleKeys"> 
     {{ p[personKey] }} 
     </td> 
    </tr> 

</table> 

您可能也有一些字典，显示名称：

$scope.displayNames = { 
    id: 'ID', 
    firstName: 'First Name' 

...

} 

，然后你的头将是：

<tr> 
    <th></th> 
    <th ng-repeat="personKey in peopleKeys"> 
     {{ displayNames[personKey] }} 
    </th> 
    </tr> 

PS：或者你可以使用ui-grid

Answer 2

var app = angular.module('myApp', []); 

function PeopleCtrl($scope, $http) { 
     $scope.headers=[]; 
    $scope.data = []; 
    $scope.LoadMyJson = function() { 
      for (var s in myJson){ 
      $scope.data.push(s); 
      if ($scope.headers.length < 1) 
       for (var prop in myJson[s]){ 
       prop.data = []; 
       $scope.headers.push({th:prop, td: []}); 
       } 
      } 
      for (var s in $scope.data){ 
      for (var prop in $scope.headers){ 
       var header = $scope.headers[prop].th; 
        var data = myJson[$scope.data[s]][header]; 
        $scope.headers[prop].td.push(data); 
      } 
      } 
    }; 

} 

你在找什么是这样的事情，我想： http://jsfiddle.net/wLkz45qj/8/

也许迭代另一次在 “内部” 为格式。