CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Rowandish
Rowandish

Reputation: 2735

Access to i and i+1 element inside a ng-repeat loop

I'm pretty new to Angular, so I can't solve this easy problem. I would like to obtain the following html structure in AngularJS:

<div>
  <div>
    {{bar[i]}}
    {{bar[i+1]}}
  </div>
  <div>
    {{bar[i+2]}}
    {{bar[i+3]}}
  </div>
</div>

I'm iterating my model using ng-repeat in the following way:

<div ng-repeat="bar in bars">
  <div>
    <div ng-include="bar.html"></div>
    <div ng-include="bar.html"></div>
  </div>
</div>

But the variable bar is, obviously, the same in both ng-include.

How to access instead to i and i+1 element inside a ng-repeat loop?

Thanks!

Upvotes: 1

Views: 45

Answers (2)

boindiil
boindiil

Reputation: 5865

You can use $index to access the current index:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-repeat="bar in ['a','b','c']">
    <div>
      <h1>Element: {{bar}}</h1>
      <div>{{$index*2}}</div>
      <div>{{$index*2+1}}</div>
    </div>
  </div>
</div>

And then you can use ng-include as follows:

<div ng-include="bars[$index*2].html"></div>
<div ng-include="bars[$index*2+1].html"></div>

Upvotes: 2

Lucas B
Lucas B

Reputation: 2528

Use the $index property

https://docs.angularjs.org/api/ng/directive/ngRepeat

bars[$index + 1]

Upvotes: 1

Related Questions