javascript - 如何在angularjs中进行表格格式化？

我在angularjs中动态生成了表数据和表列。我的桌子是

Name    Hobby
XXXX    Music
XXXX    Cricket
XXXX    Books
YYYY    Tennis
YYYY    Books
YYYY    Drawing

但是我希望我的表显示如下:

Name    Hobby

XXXX
        Music
        Cricket
        Books
YYYY
        Tennis
        Books
        Drawing

我使用以下代码生成表:

        <tr>
            <th ng-repeat="th in keys">{{th}}</th>
        </tr>
        <tr ng-repeat="x in data ">
            <td ng-repeat="th in keys">
                {{ x[th]}}
            </td>
         </tr>

我的json看起来像这样

[{"Name:"XXXX", "Hobby":"Music"},
{"Name:"XXXX", "Hobby":"Cricket"},
{"Name:"XXXX", "Hobby":"Books"},
{"Name:"YYYY", "Hobby":"Tennis"},
{"Name:"YYYY", "Hobby":"Books"},
{"Name:"YYYY", "Hobby":"Drawing"}]

我不能使用类似的

<ng-repeat="(key, value) in players | groupBy: 'team'">

因为我的表头是动态创建的

我如何在angularjs中做到这一点？

最佳答案

您可以在标记本身上执行此操作，而无需对数组进行排序或过滤。

标记

  <table>
    <thead>
      <tr>
        <th ng-repeat="th in keys">{{th}}</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="x in data">
        <td ng-repeat="th in keys">
          <span ng-show="th != 'Name' || (th == 'Name' && data[$parent.$index - 1]['Name'] != x['Name'])">
          {{ x[th]}}
          </span>
        </td>
      </tr>
    </tbody>
  </table>

Demo