2015-05-07 21 views
6

Ich habe eine vorhandene HTML-Vorlage, die Fliesen auf der Seite mit ngRepeat platziert,ändern Schrittgröße für ngRepeat

<div ng-repeat="product in productList"> 
    <div class="product-tile"> 
     Product content goes here... 
    </div> 
</div> 

Der Designer jetzt alle 3 Fliesen in einem extra div wickeln muss.

Normalerweise würde ich Schleife durch die Liste und entweder,

  • Schritt jede Schleife um 3 Positionen mit 3 Fliesen in der div in einer einzigen Iteration eingewickelt, um zu sehen, zu testen, ob die zweite und dritte Elemente existieren (für wenn ist die Listenlänge kein Vielfaches von 3)
  • Oder Schritt durch die Liste ein zu einer Zeit als normal und überprüfen Sie den Index des Artikels. Wenn ein mod von 3 0 erreicht, würde ich hinzufügen, dann die zusätzlichen div-Tags

Aber ich kann nicht sehen, wie ich in Angular tut entweder würde. Irgendwelche Vorschläge, wie man damit umgeht?

Antwort

9

Es ist viel besser, "prime" das Ansichtsmodell, so dass sie paßt Ihre Ansicht - es Ansicht genannt -Model für ein Grund. Also, Ihr productList modifiziert sein könnte:

$scope.productList = 
    [ 
    [ {/* product */ }, { }, { } ], 
    [ { }, { }, { } ], 
    // etc... 
    ]; 

Und so iterieren würden Sie nisten ng-repeat s:

<div ng-repeat="row in productList"> 
    <div ng-repeat="product in row" class="product-row-group"> 
    <div class="product-tile"> 
    </div> 
    </div> 
</div> 

Aber es möglich ist (obwohl, ineffizient) zu „pseudo-Schritt " durch das Array:

<div ng-repeat="product in productList"> 
    <div ng-if="$index % 3 === 0" 
     ng-init="group = productList.slice($index, $index + 3)"> 
    <div class="products-row"> 
     <div class="product-tile" ng-repeat="grItem in group"> 
     {{grItem}} 
     </div> 
    </div> 
    </div> 
</div> 

die erste ng-repeat geht über das gesamte Array, aber das innere ng-if rendert nur jedes dritte Element und ng-init erstellt ein Sub-Array von 3 Produkten, die als group aliased sind. Die innere ng-repeat geht über die Artikel in der group von 3 Produkten.

Demo

+0

Zwar ist dies eine ähnliche Antwort auf die andere ist (http://stackoverflow.com/a/30090844/979998), ist es klarer, und es zeigt auch einen Weg, kann es mit der getan werden bestehendes Modell. Sehr hilfreich! – richard

3

Die einzige Sache, die ich tun kann, ist, das ursprüngliche Array productList einmal zu partitionieren, wenn Sie es in ein Array von Arrays erhalten, und dann verschachtelte ng-repeat s verwenden, um die Struktur zu bekommen, nach der Sie suchen.

Im Folgenden demonstriert diesen Ansatz:

angular.module('stackoverflow', []).controller('ProductListsCtrl', function($scope) { 
 
    $scope.productLists = partition([1, 2, 3, 4, 5, 6, 7, 8], 3); 
 
}); 
 

 
/* You could put this in a utility library or something */ 
 
function partition(coll, size) { 
 
    var groups = []; 
 
    for (var groupIndex = 0, numGroups = Math.ceil(coll.length/size); 
 
     groupIndex < numGroups; 
 
     groupIndex++) { 
 
    var startIndex = groupIndex * size; 
 
    groups.push(coll.slice(startIndex, startIndex + size)); 
 
    } 
 
    return groups; 
 
}
.product-tile { 
 
    display: inline-block; 
 
    background-color: #9A9EDA; 
 
    height: 100px; 
 
    width: 100px; 
 
    line-height: 100px; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    margin-right: 10px; 
 
} 
 
.wrapper { 
 
    margin: 5px; 
 
    padding: 10px; 
 
    background-color: #634AFF; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="stackoverflow" ng-controller="ProductListsCtrl"> 
 
    <div ng-repeat="productList in productLists" class="wrapper"> 
 
    <div class="product-tile" ng-repeat="product in productList"> 
 
     {{product}} 
 
    </div> 
 
    </div> 
 
</div>

Verwandte Themen