如何在angularjs中進行表格格式化？

我在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做到這一點？

來源

2015-05-28 Priya

我們需要看到您的JSON數據 – DonJuwe

的可能的複製http://stackoverflow.com/questions/23493063/angular-ng-repeat-conditional-wrap -items-in-element-group-items-in-ng-repeat – com2ghz

正如你想要顯示的那樣操作你的數據。 –

你可以做這件事情上的標記本身，無需排序或過濾數組。

標記

<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

來源

2015-05-28 14:16:38

我會使用ng-table 您將可以輕鬆地對錶格進行排序，過濾和分組。

來源

2015-05-28 12:09:06

這裏是簡單的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

此過濾器，你可以在你的表格渲染陣列後

來源

2015-05-28 12:30:09

如何在angularjs中進行表格格式化？

回答

相關問題