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

Question

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

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 中做到这一点？

Answer 1

这是简单的 javascript 解决方案:

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

 var distinctNames = []

 for (i = 0; i < array.length; i++) { 
   if(distinctNames.indexOf(array[i].Name) === -1){
      distinctNames.push(array[i].Name);
   }
   else{
       array[i].Name = "";
   }
 }

DEMO

在这个过滤器之后你可以在你的表中渲染数组