Add item in array repeatedly for ng-repeat - arrays

Question

I have an array of objects which looks like:
{
id: "1234",
general: {
title: "lorem",
body: "..."
}
}, ...
This data is being shown with an ng-repeat:
<ul>
<li ng-repeat="item in items track by $index">
<h2>{{item.general.title}}</h2>
<p>{{item.general.body}}</p>
</li>
</ul>
Now what I want to achieve is to add items to this list. Every 15 items I want to add a new item to the array to display in my ng-repeat. The item has a different structure:
<li>
<p>a text</p>
<a>a link</a>
</li>
So far I got this in my controller:
var addLinks = function addLinks(interval, array) {
var newArray = array.slice();
for(var i = interval - 1; i < array.length; i += interval) {
newArray.splice(i, 0, {
// Here comes the item to add
});
}
return newArray;
};
$scope.items = addLinks(15, articleService.articles);
My question is how do I add the item without just copying the html?

Answer 1

You could use ng-repeat-start and ng-repeat-end and only add the other element if you are on $index+1 % 15, like this:
<ul>
<li ng-repeat-start="item in vm.array track by $index">{{item.a}}</li>
<li ng-repeat-end ng-if="$index>0 && $index+1 % 15 == 0"></li>
</ul>
Here a plunkr: http://plnkr.co/edit/qwkXGcBcxlDy0hNHTvAo?p=preview

Answer 2

I would add additional properties to the item in question:
var addLinks = function addLinks(interval, array) {
//don't return a new array!
//var newArray = array.slice();
for(var i = interval - 1; i < array.length; i += interval) {
array[i].text = "foo";
array[i].link = "bar";
}
return array;
};
And in your view:
<ul>
<li ng-repeat="item in items track by $index">
<h2>{{item.general.title}}</h2>
<p>{{item.general.body}}</p>
<p ng-show="item.text">item.text</p>
<p ng-show="item.link">item.link</p>
</li>
</ul>