Modifica dimensione passo per ngRepeat

Question

ho un modello HTML esistente che pone le piastrelle sulla pagina utilizzando ngRepeat,

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

Il progettista ha ora bisogno di avvolgere ogni 3 tessere in un extra div.

Normalmente, vorrei scorrere la lista e sia,

• Passo ogni ciclo da 3 oggetti con 3 tessere avvolte nel div in un unico iterazione, test per vedere se il 2 ° ed elementi 3rd esistono (per quando la lunghezza dell'elenco non è un multiplo di 3)
• Oppure scorrere l'elenco uno alla volta e controllare l'indice dell'elemento. Se un mod di 3 pari 0, Vorrei poi aggiungere i tag div in più

Ma non riesco a vedere come avrei fatto sia in angolare. Qualche suggerimento su come gestirlo?

Answer 1

E 'molto meglio di "prime" ViewModel in modo che si adatta alle vostre View - si chiama View -Modello per un motivo. Così, il vostro modificato productList potrebbe essere:

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

E così, per iterare si sarebbe nido 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> 

Ma è possibile (anche se, inefficiente) per "pseudo-step " attraverso l'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> 

il primo ng-repeat percorre l'intero array, ma l'interno ng-if esegue il rendering solo di ogni terzo elemento e ng-init crea un sotto-array di 3 prodotti con alias come group. L'interno ng-repeat supera gli articoli nello group di 3 prodotti.

Demo

Answer 2

L'unica cosa che posso pensare è di dividere l'array originale productList una volta quando lo si ottiene in una matrice di matrici, e quindi utilizzare nested ng-repeat s per ottenere la struttura che si sta cercando.

Quanto segue dimostra che l'approccio:

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>