I'm using ng-repeat but I would like to add an element after every 4th repeated element.

the repeated div:

<div class="product" ng-repeat="product in productList" ng-init="addFullScreenProduct($index, this)">

and then in my controller:

$scope.addFullScreenProduct = function(index, event)
{
        var currentProduct = "<div id='" + (index/4) + "' class='currentProduct sixteen columns'></div>";
        var product = event.srcElement;
        currentProduct = $pile(currentProduct)($scope);
        product.after(currentProduct);
};

I cannot get the "currentProduct" element to be added after the "product" element.

My Desired output:

<div class="currentProduct">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="currentProduct">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="currentProduct">...</div>

Any Ideas?

I'm using ng-repeat but I would like to add an element after every 4th repeated element.

the repeated div:

<div class="product" ng-repeat="product in productList" ng-init="addFullScreenProduct($index, this)">

and then in my controller:

$scope.addFullScreenProduct = function(index, event)
{
        var currentProduct = "<div id='" + (index/4) + "' class='currentProduct sixteen columns'></div>";
        var product = event.srcElement;
        currentProduct = $pile(currentProduct)($scope);
        product.after(currentProduct);
};

I cannot get the "currentProduct" element to be added after the "product" element.

My Desired output:

<div class="currentProduct">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="currentProduct">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="currentProduct">...</div>

Any Ideas?

• javascript
• jquery
• html
• angularjs

• why not just use filter? – Shaunak Commented Apr 4, 2014 at 20:18

2 Answers 2

You could use ng-repeat-start and ng-repeat-end, like so:

<div ng-repeat-start="product in productList" class="product">
    {{ product }}
</div>
<div ng-repeat-end ng-if="$index % 4 == 0" class="currentproduct sixteen columns"></div>

The div.product will be repeated, with div.currentproduct being present at every fourth iteration.

You can use filters to show every 4th element.. like this:

<div class="product" ng-repeat="product in productList" ng-show="$index % 4 == 0"></div>