CODEWITHSUNDEEP
angularjs
noneJavaScript
noneJavaScript

Reputation: 845

How to increment angular repeater?

I've an array of of images and an array of columns. array of images has 20 images.

<div data-ng-repeat="image in images">
   <div data-ng-repeat="col in cols">
      <div class="row1">
       <img class="img-responsive" width="100%" src="{{image}}">
      </div>
      <div class="row2">
       <img class="img-responsive" width="100%" src="{{image}}">
      </div>
    </div>
</div>

How can I increment image position everytime an image is used? I mean, every col in cols iteration image will take the same index for both rows. I need:

row1 = image[0], 
row2 = image[1], 
row1 = image[2], 
...and so on.

Upvotes: 0

Views: 92

Answers (1)

ShankarSangoli
ShankarSangoli

Reputation: 69905

I think you don't need outer ng-repeat as per your requirement. Try this if it helps.

<div data-ng-repeat="col in cols">
  <div class="row1">
   <img class="img-responsive" width="100%" src="{{images[2*$index]}}">
  </div>
  <div class="row2">
   <img class="img-responsive" width="100%" src="{{images[2*$index+1]}}">
  </div>
</div>

If you want to keep the outer loop then you can try this alternate solution

<div data-ng-repeat="image in images" ng-init="imageIndex = $index">
   <div data-ng-repeat="col in cols">
      <div class="row1">
       <img class="img-responsive" width="100%" src="{{images[2*imageIndex]}}">
      </div>
      <div class="row2">
       <img class="img-responsive" width="100%" src="{{images[2*imageIndex+1]}}">
      </div>
    </div>
</div>

You can also access the outer ng-repeat's $index using $parent.$index

Upvotes: 2

Related Questions