Resize step size for ngRepeat

Question

I have an existing HTML template that puts tiles on a page using ngRepeat,

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

Now the designer needs to wrap all 3 tiles in an additional div.

I usually scroll through the list and either,

• Step of each cycle into 3 elements with 3 plates wrapped in div in one iteration, testing to see if the 2nd and 3rd elements exist (when the list length is not a multiple of 3)
• Or go through the list alone while usual and check the index of the item. If mod 3 is 0, I would add extra div tags

But I do not see how I will do this in Angular. Any suggestions on how to handle this?

Answer 1

It is much better to “customize” the ViewModel to match your view — it was called View models for some reason. So your modified productList could be:

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

So, to repeat the iteration, you would 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> 

But you can (albeit inefficiently) pseudo-step through an 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> 

The first ng-repeat looks through the entire array, but the internal ng-if displays only every third element, and ng-init creates a submatrix of 3 products with an alias as group . Internal ng-repeat scans items in a group of 3 products.

Demo

Answer 2

The only thing I can think of is to split the original productList array once when you get into the array of arrays, and then use the ng-repeat nested to get the structure you are using.

This approach is shown below:

 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>