ngrepeatの行をグループ化する

Question

私はjson配列を持っており、これからテーブルを作成したいし、配列の要素である見出しを与えたいと思っています。このシナリオを示すfiddleがあります。

<div ng-repeat="products in items"> 
    <div>{{products.IDTYPE}}</div> 
    <div> 
     <table border=1> 
      <thead> 
       <th>primkey</th> 
       <th>userid</th> 
      </thead> 
      <tbody> 
       <tr> 
        <td>{{products.PRIMKEY}}</td> 
        <td>{{products.USERID}}</td> 
       </tr> 
      </tbody> 
     </table>  
    </div> 

これにより、IDTYPEの見出しを持つ簡単なテーブルが作成されます。しかし、私は一意のIDTYPEで行をグループ化したい。したがって、希望するテーブルはこのlinkのようになります。

したがって、ng-show条件を追加しようとしましたが、tbodyとテーブルがすべての行に対して構築されるため、正しく動作しません。 Thisは私が試したものです。

私は上記の説明で希望するテーブルをどのように生成するのですか？

Answer 1

ソースデータ構造を必要なものに合わせて変更したくない場合は、JavaScript側から変更するためのコードを追加する必要があります。ような何か：HTML側から

var myApp = angular.module('myApp', []); 

function MyCtrl($scope) { 
    $scope.items = [...]; //your original data 

    // Here the transformation begins... 
    $scope.newItems = {}; 

    for (var i = 0; i < $scope.items.length; i++) { 
     // We'll make it look like a map 
     // Each IDTYPE will have an array associated to it 
     if (!$scope.newItems[$scope.items[i].IDTYPE]) { 
      $scope.newItems[$scope.items[i].IDTYPE] = []; 
     } 
     $scope.newItems[$scope.items[i].IDTYPE].push($scope.items[i]); 
    } 
} 

は、あなたは自分の新しいデータに応じて読み込む必要があります：

<div ng-repeat="products in newItems"> 
    <div>{{products[0].IDTYPE}}</div> 
    <div> 
     <table border=1> 
      <thead> 
       <th>primkey</th> 
       <th>userid</th> 
      </thead> 
      <tbody> 
       <tr ng-repeat="productItem in products"> 
        <td>{{productItem.PRIMKEY}}</td> 
        <td>{{productItem.USERID}}</td> 
       </tr> 
      </tbody> 
     </table>  
    </div> 
</div> 

フィドル：http://jsfiddle.net/5mpgzdem/