由柱狀方式

Question

設定數據我有一個REST服務，返回此對象創建從靜止物體表：

[ 
    { 
    "id": 100, 
    "value": "2452" 
    }, 
    { 
    "id": 100, 
    "value": "2458" 
    }, 
    { 
    "id": 1, 
    "value": "2457" 
    }, 
    { 
    "id": 1, 
    "value": "2459" 
    }, 
    { 
    "id": 4, 
    "value": "2460" 
    }, 
    { 
    "id": 5, 
    "value": "3458" 
    } 
] 

現在，使用該得到服務，我想下面的表格要建在角並在用戶界面中顯示。

100 1 4 5 
------------------- 
2452 2457 2460 3458 
2458 2459 

即唯一ID應創建標題並且與每個標題值相關聯的值列表將被附加到相應列。

我試圖與NG-重複這樣的事情：

<table border="1"> 
<tr> 
    <th ng-repeat="column in cols">{{column.id}}</th> 
</tr> 
<tr> 
    <td ng-repeat="column in cols"> 
    <md-list> 
     <md-list-item class="md-2-line" ng-repeat="val in column.values"> 
     <md-checkbox ng-model="item.done"></md-checkbox> 
     <div class="md-list-item-text"> 
      ?? 
     </div> 
     </md-list-item> 
    </md-list> 

    </td> 
</tr> 

但仍然不知道如何做？請幫忙。

Answer 1

嘗試使用groupBy過濾器。

var app = angular.module('anApp', ['angular.filter']); 
 
app.controller('aCtrl', function($scope) { 
 
    $scope.data = [ 
 
    { 
 
    "id": 100, 
 
    "value": "2452" 
 
    }, 
 
    { 
 
    "id": 100, 
 
    "value": "2458" 
 
    }, 
 
    { 
 
    "id": 1, 
 
    "value": "2457" 
 
    }, 
 
    { 
 
    "id": 1, 
 
    "value": "2459" 
 
    }, 
 
    { 
 
    "id": 4, 
 
    "value": "2460" 
 
    }, 
 
    { 
 
    "id": 5, 
 
    "value": "3458" 
 
    } 
 
]; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script> 
 
<div ng-app="anApp" ng-controller="aCtrl"> 
 
    <table border="1"> 
 
<tr> 
 
    <th ng-repeat="col in data | groupBy: 'id'">{{col[0].id}}</th> 
 
</tr> 
 
<tbody> 
 
<tr> 
 
    <td ng-repeat="col in data | groupBy: 'id'"> 
 
    <table> 
 
    <tr ng-repeat="c in col"> 
 
     <td> {{c.value}}</td> 
 
    </tr> 
 
    </table> 
 
    </td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
</div>