Angularjs Nested Ng-repeat By Number

[Michael Caputo]

I've got a bunch of data I would like to display in a sliding carousel type layout. Ideally we would show 8 of these data points in each slide, so that it would look something like this:

Slide
    datapoint 1
    datapoint 2
    datapoint 3
    datapoint 4
    datapoint 5
    datapoint 6
    datapoint 7
Slide
    datapoint 8
    datapoint 9
    datapoint 10
    datapoint 11
    etc etc...

Now I know how to iterate over these datapoints using ng-repeat, however, i'm not sure how I can iterate while grouping them into their own respective groups.

Currently i'm using ng-repeat="(index, master) in data" to iterate, but obviously, this gives me a list of items without the grouping that i'm after.

I posted this on Stack Overflow, and was directed to this but there seems to be a "10 $digest() iterations reached. Aborting" Bug where it causes a bunch of errors.

Anyone have any suggestions? I'd love to have a proper working filter that can do this as it would make it easier to implement in other places.

[Michael Caputo]

bueller bueller?

[Luke Kende]

I've done this before with slice() but there was a finite number of item groups and always the same range of 8 items:

<div ng-repeat="(index, master) in data.slice(0,7)"></div>

<div ng-repeat="(index, master) in data.slice(8,15)"></div>

<div ng-repeat="(index, master) in data.slice(16,23)"></div>

<div ng-repeat="(index, master) in data.slice(24,33)"></div>

If you aren't sure how many datapoints and therefore slides, it becomes a nested ng-repeat with some math to work out. For that matter you can make the grouping length variable:

var groupLength = 8;

$scope.data = []; //assume gets populated with some number of datapoint items

//create array of numbers for slides

$scope.slides = []

for (var i = 0; i< Math.ceil($scope.data.length / groupLength); i++) $scope.slides.push({ start: i * groupLength, end: i * groupLength + groupLength - 1 } );  //gotta love math

//handle last one in case if not evenly divisible by range

var lastIndex = $scope.slides.length - 1;

$scope.slides[lastIndex].end =  $scope.data.length - 1;

<div ng-repeat="index in slides">

  <div ng-repeat="datapoint in data.slice(index.start,index.end)"></div>

</div>

[Sander Elias]

Michael,

Can you show me your actual data-source? The path Luke points out is probably the correct way in this case, but I suspect you just need a good 'paging' filter.

Regards

Sander

[Steve Jackson]

What about an ng-if nested inside your repeater which shows or hides the <slide> element(s)?  You could do structure it like so:

<slideStart> <!-- or however you start your slider HTML -->

<div ng-repeat"whatever in data">

<div ng-bind="whatever"></div> 

<slideEnd ng-if="!($index mod 8)">

<slideStart ng-if="!($index mod 8)">

</div>

<slideEnd> <!-- or however you end your slider HTML --> 

 

Or instead of using a <div> for the repeater (since that would throw off the HTML for the slider elements) you might use the comment syntax (which I have not personally used, and so I don't want to mislead you with wrong syntax in this answer).

There may be a way to use the ng-repeat-start and ng-repeat-end directives, as well, if you are using a recent enough version of Angular.

Let me know if this helps!

Steve