Raggruppamento di righe in ngrepeat

Question

Ho array json e voglio creare una tabella da questo e voglio dare un'intestazione che è un elemento dell'array. Ecco lo fiddle che mostra lo scenario.

<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> 

Ciò creerà la tabella semplice con l'intestazione da IDTYPE. Ma voglio raggruppare le righe con IDTYPE univoco. La tabella così desiderata sarà come mostrato in questo link.

Così ho provato ad aggiungere una condizione di ng-show ng-show="$index==0 || items[$index-1].IDTYPE!=items[$index].IDTYPE" ma non funziona correttamente in quanto tbody e table saranno costruiti per ogni riga. This è quello che ho provato.

Quindi, come generare il tavolo come desiderato nella descrizione sopra?

Answer 1

Se non si desidera modificare la struttura dei dati di origine per adattarsi meglio a ciò che è necessario, potrebbe essere necessario scrivere un codice aggiuntivo per cambiarlo dal lato JavaScript. Qualcosa di simile:

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]); 
    } 
} 

Dal lato HTML, devi solo leggere di conseguenza per i nuovi dati:

<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> 

Fiddle: http://jsfiddle.net/5mpgzdem/