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

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

http://jsfiddle.net/wLkz45qj/

Answer 1

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

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

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

使用动态标头呈现表格

2 个答案: