I am currently working on an Angular application that displays data in 3 item columns using Bootstrap. To achieve this layout, I have implemented the following code snippet to group my array of data into sets of 3:
examples.success(function(data) {
$scope.examples = data; //[0, 1, 2, 3, 4, 5];
$scope.examplesGrouped = $filter('groupBy')($scope.examples, 3);//[0, 1, 2], [3, 4, 5]
});
$filter = ('groupBy', function() {
return function(items, groupItems) {
if (items) {
var newArray = [];
for (var i = 0; i < items.length; i+=groupItems) {
if (i + groupItems > items.length) {
newArray.push(items.slice(i));
} else {
newArray.push(items.slice(i, i + groupItems));
}
}
return newArray;
}
};
});
In the HTML code snippet below:
<div class="row" ng-repeat = "examples in examplesGrouped">
<div class="col-md-4 portfolio-item" ng-repeat="example in examples">
<a ng-href="#/examples/{{ $parent.$index }}">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
</div>
</div>
Although everything seems to be functioning correctly, I encountered an issue where the routes being set with $parent.$index are repeated as [0, 1, 2], [0, 1, 2] instead of correctly displaying [0, 1, 2], [3, 4, 5].
If you have any suggestions or ideas on how to resolve this problem, please let me know.