ngrepeat

Question

में पंक्तियों को समूहीकृत करना मेरे पास जेसन सरणी है और मैं इससे टेबल बनाना चाहता हूं और एक शीर्षक देना चाहता हूं जो सरणी का तत्व है। परिदृश्य दिखा रहा है 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> 

यह आईडीटीईपीई से शीर्षक के साथ सरल तालिका बनाएगा। लेकिन मैं अद्वितीय आईडीटीईपीई के साथ पंक्तियों को समूहित करना चाहता हूं। इसलिए वांछित तालिका इस link में दिखाया जाएगा।

इसलिए मैंने एनजी-शो स्थिति ng-show="$index==0 || items[$index-1].IDTYPE!=items[$index].IDTYPE" जोड़ने की कोशिश की लेकिन यह ठीक से काम नहीं करता क्योंकि प्रत्येक पंक्ति के लिए टैब और टेबल का निर्माण किया जाएगा। This जो मैंने कोशिश की है।

तो तालिका को कैसे उत्पन्न करें जैसा कि मैंने ऊपर दिए गए विवरण में वांछित किया था?

Answer 1

यदि आप अपनी स्रोत डेटा संरचना को बदलने की इच्छा नहीं रखते हैं तो आपको बेहतर तरीके से फिट करने के लिए, आपको जावास्क्रिप्ट पक्ष से इसे बदलने के लिए कुछ अतिरिक्त कोड लिखना पड़ सकता है। की तरह कुछ:

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/