渲染表動態標題

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/

也許迭代另一次在 「內部」 爲格式。