anglejsに複合htmlテーブルとしてオブジェクトを表示するには

Question

以下のテンプレートで表示したいオブジェクトがあります。誰もがこれで私を導くことができますか？私はそれを簡単かつ迅速に最適化したい。

ありがとうございました。

オブジェクト：

var dataSource = [ 
    { 
     Id: 5, 
     CriteriaName: 'First Criteria', 
     CustomerName: 'Customer-1', 
     Points: 350, Total: 500 
    }, 
    { 
     Id: 5, 
     CriteriaName: 'First Criteria', 
     CustomerName: 'Customer-2', 
     Points: 250, 
     Total: 500 
    }, 
    { 
     Id: 5, 
     CriteriaName: 'First Criteria', 
     CustomerName: 'Customer-3', 
     Points:150, 
     Total: 500 
    }, 
    { 
     Id: 5, 
     CriteriaName: 'Second Criteria', 
     CustomerName: 'Customer-1', 
     Points:400, 
     Total: 450 
    }, 
    { 
     Id: 5, 
     CriteriaName: 'Second Criteria', 
     CustomerName: 'Customer-2', 
     Points: 300, 
     Total: 450 
    }, 
    { 
     Id: 5, 
     CriteriaName: 'Second Criteria', 
     CustomerName: 'Customer-3', 
     Points:200, 
     Total: 450 
    } 
]; 

所望の出力は次のようになります

jsfiddle：

https://jsfiddle.net/7L79dryr/1/

Answer 1

私はちょうど1

最初に利用可能なを使用し、異なるデータ構造にこれをマップする必要があるだけでなく、顧客の配列

<table class='tbl'> 
    <thead> 
    <tr> 
     <th></th> 
     <th>total</th> 
     <th ng-repeat="customer in customers">{{customer}}</th>   
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat='(name, data) in criteria'> 
     <td>{{name}}</td> 
     <td>{{data.Total}}</td> 
     <td ng-repeat="customer in customers"> 
      {{data[customer] ? data[customer] : 'N/A' }} 
     </td> 
    </tr> 
    </tbody> 
    </table> 

JS

var customers = {}, 
    criteria = {}; 

data.forEach(function(item){ 
    customers[item.CustomerName]=true; 
    if(!criteria[item.CriteriaName]){ 
     criteria[item.CriteriaName]= {Total:item.Total} 
    } 
    criteria[item.CriteriaName][item.CustomerName] = item.Points; 
}); 

$scope.customers = Object.keys(customers).sort(); 
$scope.criteria = criteria; 

ないTotalがどのように動作するかを確認してください

DEMO