Erstellen Eltern-Div innerhalb ng-Wiederholung

Ich habe 25 Elemente aus JSON String. Jedes Element wird mit einem Schlüssel namens "InRowPlcement" geliefert und der Wert wird als "0" oder "1" oder "2" usw. zugewiesen.Erstellen Eltern-Div innerhalb ng-Wiederholung

{"ItemID":"516","ItemName":"Newzeland Lake Tysonno","InRowPlcement":0}, 
{"ItemID":"514","ItemName":"Newzeland Lake Tysonno","InRowPlcement":0}, 
{"ItemID":"546","ItemName":"Underworld Lives","InRowPlcement":0}, 
{"ItemID":"527","ItemName":"In a holiday beach","InRowPlcement":1}, 
{"ItemID":"542","ItemName":"Underworld Lives","InRowPlcement":1}, 
{"ItemID":"525","ItemName":"Lake somewhere","InRowPlcement":1}, 
{"ItemID":"540","ItemName":"Coral Structure at Andaman","InRowPlcement":1}, 
{"ItemID":"569","ItemName":"Ice Rock, Ireland","InRowPlcement":2}

Die Absicht ist, platziert, um die "0" "InRowPlacement" Elemente in der ersten Reihe "1" in der zweiten Reihe, "2" in der dritten Reihe und so weiter. Die Anzahl der Elemente kann in jeder Zeile variieren. Es kann von 1 bis 5 in einer einzigen Reihe möglich sein.

begann ich die ng-repeat

<div class="ROW" ng-repeat="item in items"> 
    <div class="COLUMN">{{item.ItemName}}<div> 
</div>

Ich brauche das Ergebnis wie

für Ihre Hilfe

<div class="ROW"> 
     <div class="COLUMN">Newzeland Lake Tysonno<div> 
     <div class="COLUMN">Newzeland Lake Tysonno<div> 
     <div class="COLUMN">Underworld Lives<div> 
    </div> 
    <div class="ROW"> 
     <div class="COLUMN">In a holiday beach<div> 
     <div class="COLUMN">Underworld Lives<div> 
     <div class="COLUMN">Lake somewhere<div> 
     <div class="COLUMN">Coral Structure at Andaman<div> 
    </div>

Vielen Dank im Voraus sein sollte.

LÖSUNG UPDATE:

Auf der Grundlage der Logik von @vp_arth vorgesehen, hier ist der eigentliche Code, der für mich arbeitet

var view_rows = {}; 
angular.forEach(response.data, function(InRowPlcement,index){ 
    if (!view_rows[response.data[index].InRowPlcement]) view_rows[response.data[index].InRowPlcement] = []; 
    view_rows[response.data[index].InRowPlcement].push(response.data[index]); 

}); 
groups = view_rows;

Quelle

2016-05-18 Sudip Pal

Warum gerade nicht Datenstruktur für Ansichtsschicht ändern? Iterate durch und baue, was du in deinem Controller brauchst. –

@vp_arth, Können Sie mir bitte einige Details geben, ich wollte nur "

" in a continuous repeat statement based on a key value which is available in the array. Just not able to fix the expression, how to check. using ng-if or something else. –

inserting parts of DOM like this too smells. Just think angular. There is a data and there is directive ('ng-repeat') to represent this data. You can write your own directive with custom behavior. You shouldn't manipulate with raw HTML parts (like '

') einfügen - einige Kätzchen werden jedes Mal sterben, wenn Sie das versuchen. –

Dies kann mit Bündel von Filtern durchgeführt werden, aber viel besser nur Ihre Datenstruktur für View-Ebene in der Steuerung vorzubereiten.

In Ihrem Controller:

let data = [ 
{"ItemID":"516","ItemName":"Newzeland Lake Tysonno","InRowPlcement":0}, 
{"ItemID":"514","ItemName":"Newzeland Lake Tysonno","InRowPlcement":0}, 
{"ItemID":"546","ItemName":"Underworld Lives","InRowPlcement":0}, 
{"ItemID":"527","ItemName":"In a holiday beach","InRowPlcement":1}, 
{"ItemID":"542","ItemName":"Underworld Lives","InRowPlcement":1}, 
{"ItemID":"525","ItemName":"Lake somewhere","InRowPlcement":1}, 
{"ItemID":"540","ItemName":"Coral Structure at Andaman","InRowPlcement":1}, 
{"ItemID":"569","ItemName":"Ice Rock, Ireland","InRowPlcement":2} 
]; 
let view_rows = {}; 
data.forEach(row => { 
    if (!view_rows[row.InRowPlcment]) view_rows[row.InRowPlcment] = []; 
    view_rows[row.InRowPlcment].push(row); 
}); 
$scope.groups = view_rows;

Dann im Blick:

<div class="ROW" ng-repeat="(i, rows) in groups"> 
    <div class="COLUMN" ng-repeat="row in rows">{{row.ItemName}}<div> 
</div>

Quelle

2016-05-18 04:53:54

Dank @vp_arth, ich habe das Wunschergebnis. Ich werde den tatsächlichen Controller-Code für die Ausgabe in Sicht zu aktualisieren Laden. –

Sie den Ausdruck in DOM ng-if zum Abbau unter Verwendung hinzufügen könnte die Gegenstände.

<div class="ROW" ng-repeat="item in items"> 
    <div ng-if ="item.InRowPlcement == 0"> 
    <div class="COLUMN">{{item.ItemName}}<div> 
    </div> 
    <div ng-if ="item.InRowPlcement == 1"> 
    <div class="COLUMN">{{item.ItemName}}<div> 
    </div> 
    <div ng-if ="item.InRowPlcement == 2"> 
    <div class="COLUMN">{{item.ItemName}}<div> 
    </div> 
</div>

Arbeits Plunker: https://plnkr.co/edit/vFR6NUIu6Uyl8XSOTiax?p=preview

Quelle

2016-05-18 04:53:52 Sajal

Wie können wir wissen, wie viel 'InRowPlacement's sein wird? –

es sagt 25 Elemente in der JSON, mit jeder Zeile hat 'InRowPlacements' Wert – Sajal

Dank @ Dev-One, es ist eine gültige Logik, aber ich möchte nicht 25 ng hinzufügen - wenn meiner Ansicht nach, irgendwann der JSON-Knoten Mai –

ich den Code unten wie pro Ihre Anforderung geschrieben haben und glauben, dass es wie pro Ihre Anforderung funktionieren würde.

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script> 
     <script> 
      var mainModule = angular.module('mainModule', ['angular.filter']); 
      mainModule.controller('mainCntrl', function($scope) { 
       $scope.items = [ 
        {"ItemID":"516","ItemName":"Newzeland Lake Tysonno","InRowPlcement":0}, 
        {"ItemID":"514","ItemName":"Newzeland Lake Tysonno","InRowPlcement":0}, 
        {"ItemID":"546","ItemName":"Underworld Lives","InRowPlcement":0}, 
        {"ItemID":"527","ItemName":"In a holiday beach","InRowPlcement":1}, 
        {"ItemID":"542","ItemName":"Underworld Lives","InRowPlcement":1}, 
        {"ItemID":"525","ItemName":"Lake somewhere","InRowPlcement":1}, 
        {"ItemID":"540","ItemName":"Coral Structure at Andaman","InRowPlcement":1}, 
        {"ItemID":"569","ItemName":"Ice Rock, Ireland","InRowPlcement":2} 
       ]; 
      }); 
     </script> 
    </head> 
    <body ng-app="mainModule"> 
     <div ng-controller="mainCntrl"> 
      <ul ng-repeat="(key, value) in items | groupBy: 'InRowPlcement'"> 
       <div class="ROW"> 
       <div class="COLUMN" ng-repeat="item in value"> 
        {{ item.ItemName }} 
       </li> 
       </div> 
      </ul> 
     </div> 
    </body> 
</html>

Quelle

2016-05-18 05:31:48

Dank @Suneet Bansal, sieht die Logik gut für mich aus, aber ich möchte eine weitere externe Ressource vermeiden. –

Erstellen Eltern-Div innerhalb ng-Wiederholung

Antwort

Verwandte Themen