2015-11-26 28 views
5

Ich habe JSON-Array und ich möchte Tabelle von diesem erstellen und geben Sie eine Überschrift, die ein Element des Arrays ist. Hier ist fiddle zeigt das Szenario.Gruppierung von Zeilen in ngrepeat

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

Dies wird einfache Tabelle mit Überschrift aus dem IDTYPE erstellen. Aber ich möchte die Zeilen mit eindeutigen IDTYPE gruppieren. So gewünschte Tabelle wird wie in dieser link gezeigt.

Also habe ich versucht, eine ng-show-Bedingung ng-show="$index==0 || items[$index-1].IDTYPE!=items[$index].IDTYPE" hinzufügen, aber es funktioniert nicht richtig, da tbody und Tabelle für jede Zeile erstellt werden. This ist was ich versucht habe.

Also, wie die Tabelle zu generieren, wie ich in der obigen Beschreibung gewünscht?

Antwort

2

Wenn Sie Ihre Quelldatenstruktur nicht so ändern möchten, dass sie besser zu Ihren Anforderungen passt, müssen Sie möglicherweise zusätzlichen Code schreiben, um ihn von der JavaScript-Seite zu ändern. Etwas wie:

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

aus der HTML-Seite, man muss nur entsprechend Ihre neue Daten lesen:

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

+0

Ja. Die Umstrukturierung der Daten wird das Problem leicht lösen, aber ich möchte wissen, wie es ohne Umstrukturierung getan werden kann? – Navaneet

+0

Der Code wurde so geändert, dass er genau Ihren Anforderungen entspricht. – Jodevan

+0

@Navaneeth, wenn es Ihr Problem löst, vergessen Sie nicht, es als gültige Antwort zu markieren ;-) – Jodevan

Verwandte Themen