使用动态标头呈现表格

I have to render a table with dynamic headers, I mean, I don't want to do something like this in the HTML

我必须使用动态标题呈现一个表，我的意思是，我不想在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>

I want something like this

我想要这样的东西

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

that is only an example, I need to do it with this data:

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

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

}

every key, like clicks, conversions, cost, etc, should be a td, it is just that I don't want static HTML.

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

Any suggestions?

有什么建议么？

EDIT

编辑

And also, sometimes that object will grow, could come up with some more keys like this one 55f6de98f0a50c25f7be4db0

而且，有时候那个对象会增长，可能会出现更多这样的键55f6de98f0a50c25f7be4db0

I did this fiddle with the exact same data I am receiving

我用我收到的完全相同的数据做了这个小提琴

http://jsfiddle.net/wLkz45qj/

2 个解决方案

#1

UPDATE: What you need to do is first convert you inconvenient object to array of objects with simple structure, and then use my code , i.e.

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

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

will turn into

会变成

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

or just

要不就

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

easiest way to do that is to use lodash or underscore ( check map, flatMap, pairs etc)

最简单的方法是使用lodash或下划线（检查地图，flatMap，对等）

@jperezov showed you core idea, little bit detailed example:

@jperezov向您展示了核心思想，一点点详细的例子：

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

and

和

 <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>

You may also have some dictionary with display names:

您可能还有一些显示名称的字典：

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

...

and then your header going to be:

然后你的标题将是：

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

PS: OR you can just use ui-grid

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

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

}

What you're looking for is something like this, I think: http://jsfiddle.net/wLkz45qj/8/

你想要的是这样的东西，我想：http：//jsfiddle.net/wLkz45qj/8/

Maybe iterate another time over "inner" for formatting.

也许在“内部”上再次迭代进行格式化。

#1