使用angularjs为HTML表显示动态列名

Question

我只是准备了一个数据并想在html表中显示，但问题是每次调用$ http服务时，它都会返回n列。 因此，基本上我想显示的是，数据的第一行应用于列名，其余的是行。 确保列名不固定，可能有n个列。 下面是示例数据：

 [["Product",2016,2017],["A",50.92,550],["B",10,0],["C",20,0]] or [["Product",2015, 2016,2017],["A",80, 50.92,550],["B",20, 10,0],["C",75,20,0]] 

我尝试了此操作，但没有获得如何将第一行打印为列并在下面显示其余行的方法。

 <table style="width:100%; font-size:11px; " ng-repeat="(key, value) in NewTable"> <thead> <tr style="background-color:#00372B; height: 50px; "> <th style="padding:1%; color:white;" colspan="3">{{ key }}:{{value}}</th> </tr> </thead> </table> 

要求有人也提供带有角度过滤器的解决方案，这样我也可以在表上添加一些计算列。 谢谢。

Answer 1

根据提供的数据确定，尝试一下

<table>
  <thead ng-repeat="columns in NewTable | limitTo:1">
    <tr ng-repeat="column in columns">
      <th>{{ column }}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="rows in NewTable.slice(1,NewTable.length)">
      <td ng-repeat="row in rows">{{ row }}</td>
    </tr>
  </tbody>
</table>

其中NewTable是角度控制器/组件中的数据数组。