2016-07-01 11 views
0

Ich brauche deine Hilfe. Ich habe mich dazu entschieden, einen Online-Markt zu schaffen, und ich bin irgendwie neu in einigen Teilen von AngularJS und das ist das erste Mal, dass ich mit einem solchen Problem mit ng-repeat konfrontiert wurde. Ich habe folgende HTML-Struktur (es ist nur ein erforderlicher Teil davon):Iterieren durch Array über ngRepeat mit Brüchen

<div class="goods"> 
    <div class="goods-row" ng-repeat="???"> 
     <div class="good" ng-repeat="???"> 
      <button id="add_to_cart">+</button> 
      <div class="descr"> 
       <div class="descr-top"> 
        <h5 class="g-name"> 
         NAME IS HERE 
        </h5> 
        <span class="g-price"> 
         PRICE IS HERE 
        </span> 
       </div> 
       <div class="descr-mid" ng-bind="good.description"></div> 
      </div> 
     </div> 
    </div> 
</div> 

"Ware" (Warenklasse) umfasst "rows of goods" (Waren-Reihe). Jede Zeile sollte (standardmäßig) 4 Waren (gute Klasse) enthalten, aber es sollte auch bemerkt werden, dass ich einen Filter verwenden werde, der die Anzahl der sichtbaren Waren in einer Reihe ändern könnte, deshalb brauche ich eine flexible Lösung. Was soll ich in ng-repeat eingeben? P.S. Ich habe einen Blueprint mit JS-Code erstellt (siehe unten), der irgendwie zeigt, was ich will, aber wie man es in AngularJS macht?

var arr = []; 
for (i in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) { 
    arr.push({ 
     number: i 
    }); 
} 
var divider = 4; 
for (var i = 0; i < arr.length;) { 
    for (var j = 0; j < divider; j++) { 
     if ((j + i) < arr.length) { 
      console.log(arr[j + i]); 
     } 
    } 
    i = i + divider; 
    console.log(" "); 
} 
+1

Statt Protokollierung der Werte in Ihrem Plan durchgeführt werden, erstellen Sie die Struktur benötigt durch die Ansicht (dh ein Array von Reihen, wobei jede Reihe ein Array von 4 Gütern ist) und über diese Struktur iterieren. –

+0

In Blueprint Hauptteil ist eine for-Schleifen, egal wie ich ein Array erstellen. Ich habe schon darüber nachgedacht, aber nach der Filterung konnte ich viele Reihen mit 2 oder 3 Lements sehen, anstatt sie in neuen Reihen mit Elementen neu zu strukturieren, die den Filterparametern entsprechen. Wenn es keine Antwort gäbe, könnte ich einfach alle Waren deaktivieren, die nicht zum Filter passen, ohne sie zu verschwinden – ShiiRochi

+0

Ich möchte eine Art Lösung finden, in der nach dem Anwenden eines Filters (zum Beispiel Preis) alle Reihen werden in neue umstrukturiert werden, die auch maximal 4 Elemente enthalten würden, die zu Filterparametern passen – ShiiRochi

Antwort

1

Mit lodash Bibliothek können Sie chunk Funktion verwenden, um ein Array in Teile aufzuspalten und dann eine Liste erstellen, die Ihren Bedürfnissen entspricht.

Also im Grunde nur iterieren, wie Sie für eine normale Liste von Arrays (die Ihre Zeilen mit Waren darstellen würde) und implementieren eine Funktion, die diese Liste nach dem Teiler aufbauen. Auf diese Weise können Sie die Funktion aufrufen, wenn Sie Ihre Liste neu erstellen müssen (im Beispiel unten auf der Tastatureingabe) und AngularJS den Rest erledigen lassen.

(function(angular) { 
 

 
    'use strict'; 
 
    
 
    angular.module('ngRepeat', []) 
 
    .controller('repeatController', function($scope) { 
 
    
 
     // the goods 
 
     $scope.goods = [ 
 
     { name: "name-1", price: 1.01, description: 'desc-1' }, 
 
     { name: "name-2", price: 2.02, description: 'desc-2' }, 
 
     { name: "name-3", price: 3.03, description: 'desc-3' }, 
 
     { name: "name-4", price: 4.04, description: 'desc-4' }, 
 
     { name: "name-5", price: 5.05, description: 'desc-5' }, 
 
     { name: "name-6", price: 6.06, description: 'desc-6' }, 
 
     { name: "name-7", price: 7.07, description: 'desc-7' }, 
 
     { name: "name-8", price: 8.08, description: 'desc-8' }, 
 
     { name: "name-9", price: 9.09, description: 'desc-9' }, 
 
     { name: "name-10", price: 10.10, description: 'desc-10' }, 
 
     { name: "name-11", price: 11.11, description: 'desc-11' }, 
 
     { name: "name-12", price: 12.12, description: 'desc-12' } 
 
     ]; 
 

 
     // divider determines how many goods per row (defaulted to 4) 
 
     $scope.divider = 4; 
 
    
 
     // function that build the rows of goods 
 
     $scope.dividerChanged = function() { 
 
     $scope.rows = _.chunk($scope.goods, $scope.divider); 
 
     }; 
 
    
 
     // initialize rows on first load 
 
     $scope.dividerChanged(); 
 
    }); 
 
})(window.angular);
.divider { 
 
    margin-bottom: 10px; 
 
} 
 
    
 
.goods-row { 
 
    border: 1px solid blue; 
 
    padding: 10px; 
 
    text-align: center; 
 
} 
 

 
.good { 
 
    border: 1px solid red; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    width: 50px; 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 

 
<body ng-app="ngRepeat"> 
 
    <div ng-controller="repeatController"> 
 
    
 
    divider: <input type="text" ng-model="divider" ng-keyup="dividerChanged()" class="divider"> 
 
    
 
    <div class="goods"> 
 
     <div class="goods-row" ng-repeat="row in rows"> 
 
     <div class="good" ng-repeat="good in row"> 
 
      <button id="add_to_cart">+</button> 
 
      <div class="descr"> 
 
      <div class="descr-top"> 
 
       <h5 class="g-name">{{ good.name }}</h5> 
 
       <span class="g-price">{{ good.price | currency }}</span> 
 
      </div> 
 
      <div class="descr-mid">{{ good.description }}</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    
 
    </div> 
 
</body>

+0

Danke, ich werde es versuchen, es scheint flexibler als nur manuelle Aufteilung auf Array von Arrays, und ich denke, dass ich in der Lage sein werde, Re-Struktur von Zeilen auf keyup auslösen, so dass Elemente, die einen Filter passieren -test (zum Beispiel diejenigen, deren Preis mehr als 100 ist) wird verwendet, um neue Zeilen zu bilden – ShiiRochi

0

ich nicht ganz verstehe Ihre Frage können, versuchen Sie eine gefilterte Array zu bauen, aber immer wollen die Top-4-Einträge angezeigt werden?

Wenn ja, dann kann es mit ng-repeat Filter (custom oder nicht) und limitTo Filter

<div ng-repeat="data in test.data | customFilter:test.selectedFilter | limitTo:4">{{data}}</div>

https://jsbin.com/wajapabaro/1/edit?html,js,output