私は、このオブジェクトを返すRESTサービス、持って

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" 
    } 
] 

を、このGETサービスを使用して、私は次の表は、角に建設することにしたいですそれをUIで表示します。

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>