Change step size for ngRepeat

Answer 1

The only thing I can think to do is to partition the original productList array once when you get it into an array of arrays, and then use nested ng-repeats to get the structure you are after.

The following demonstrates that approach:

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;
}

  

    

      {{product}}