使用angularjs为html表显示动态列名答案

【问题标题】：Display dynamic column name using angularjs for html table使用angularjs为html表显示动态列名
【发布时间】：2017-01-20 22:26:52
【问题描述】：

我刚刚准备了一个数据并想在 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>

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

【问题讨论】：

Mathias W，请参阅我更新的问题。
还将您的角度代码发布到您正在构建数据的位置。
Ali Baig，实际上我的 Angular 代码非常复杂，这就是为什么我不打算发布所有可能会让其他人理解或可能需要更长的时间才能解决的东西问题。
好的，我根据给定的数据在下面添加了我的答案。请发布您的反馈

标签： javascript angularjs asp.net-mvc

【解决方案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 是您的角度控制器/组件中的数据数组。

【讨论】：

它确实使第一行与其他行分开，但我如何获取每个对象的值。我的意思是它以这种形式显示数据： ["Product",2016,2017] ["A",50.92,550] ["B",10,0] ["C",20,0] 而且在此之后我想对 sum、avg 等计算字段使用一些角度过滤器。
是的，我做了一些事情： {{ ent } } 它就像一个魅力，但我可以再次使用这些角度过滤器。
@Saleem 我已经根据你的第一条评论更新了我的答案，试试看它现在是否有效。
是的，您可以为此创建一个自定义过滤器，并在 ng-repeat 块结束后使用它。这将是小菜一碟；）
Ali Baig，我可以使用 angular-fitler 在每行末尾附加一个计算列吗？