AngularJS - Different HTML according to index in ng-repeat

Question

What is the best way to change the HTML inside an ng-repeat, according to it's current index? I want to output two divs that fill the container vertically, and the third div will fill half, on top of the fourth div which fills another half. Repeat for the next elements. Example in the following image:

enter image description here

I thought of incrementing my $index in the ng-repeat by doing {{$index = $index + 1}}, evaluating the $index inside an ng-if to see if it is the desired value. But I am unable to increment the index that way (when I print it, it shows as 33, 34, 35... etc). Thanks in advance.

EDIT:

As it stands, I forgot to add a small detail. The number 3 and 4, or 7 and 8 need to be printed in the same ng-repeat. This is a carousel (slick-js) and those half-divs need to be in the same "slide" in the carousel. The only way is printing them at the same time, that is, both $index and $index+1, otherwise they are treated as different slideshows.

Okazari · Accepted Answer · 2015-05-27 15:59:36Z

2

Here is a working plunker

You can use this syntax :

<div ng-repeat="div in divs" ng-class="{'up' : $index % 4 === 3, 'down': $index % 4 === 2}">{{div}} = {{$index}}</div>

Grouping by 4 elements ng-class will add the class 'up' on each 3rd and 'down' on each 4th

EDIT :

What about using a new array with all your slide like this :

 //you'll need to build it
 $scope.slideArray = [1,2,[3,4],5,6,7];

and displaying it like this :

<div ng-repeat="slide in slideArray">
    <div ng-repeat="subSlide in slide">
       {{subSlide}}
    </div>
</div>

Using some good CSS and adpating this to your need should do the trick

edited May 27, 2015 at 15:59

answered May 27, 2015 at 14:22

Okazari

4,5971 gold badge17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Luís Ferreira Over a year ago

Thanks, I edited my question because I forgot a small detail. The half-divs need to be printed in the same ng-repeat, that is, I need to access both the current $index and $index+1 in the same iteration of ng-repeat.

Luís Ferreira Over a year ago

Thanks, I will try it in a while :)

ShankarSangoli · Accepted Answer · 2015-05-27 14:12:14Z

2

May be you can maintain an array of numbers based on your requirement of how many divs you want to render. Inside ng-repeat using the $index get the value of array item and render the divs accordingly.

E.g:

$scope.items = [];
$scope.divsToRender = [1,1,2,1,1,2];

<div ng-repeat="item in items">
 //Here use divsToRender[$index] and get the number of divs to render based on current index
</div>

answered May 27, 2015 at 14:12

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

1 Comment

Luís Ferreira Over a year ago

Thanks, I edited my question because I forgot a small detail. The half-divs need to be printed in the same ng-repeat, that is, I need to access both the current $index and $index+1 in the same iteration of ng-repeat.

Donal · Accepted Answer · 2015-05-27 14:13:29Z

2

$index will give you a the index of the current item in ng-repeat. You can use that in your ng-if. It is zero based. In your example your ng-if could be something like this:

<ng-if="$index == 2 || $index == 3 || $index == 6 || $index == 7">

answered May 27, 2015 at 14:13

Donal

33.2k10 gold badges69 silver badges75 bronze badges

1 Comment

Luís Ferreira Over a year ago

Thanks, I edited my question because I forgot a small detail. The half-divs need to be printed in the same ng-repeat, that is, I need to access both the current $index and $index+1 in the same iteration of ng-repeat.

Collectives™ on Stack Overflow

AngularJS - Different HTML according to index in ng-repeat

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related