如何將對象顯示爲angularjs中的複雜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

需要把這個映射到不同的數據結構以及客戶

<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