javascript - 呈现具有动态标题的表格

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"
   },

}

每个键，如点击、转化、成本等，都应该是一个td，只是我不想要静态 HTML。

有什么建议吗？

编辑

而且，有时该对象会增长，可能会产生更多像这样的键 55f6de98f0a50c25f7be4db0

我用我收到的完全相同的数据做了这个 fiddle

http://jsfiddle.net/wLkz45qj/

Answer 1

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

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

会变成

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

或者只是

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

最简单的方法是使用 lodash 或下划线(检查 map 、平面 map 、对等)

@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