27

Im using a simple ng-repeat to generate a list of countries. Within each list is a hidden row/div that can be expanded and collapsed.

The issue that i am facing, is that before i introduced Angular into my application, i manually hard-coded the element's ID, for example:

<li data-show="#country1">
    {{country.name}} has population of {{country.population}}

    <div id="country1">
         <p>Expand/collapse content
    </div>
</li>
<li data-show="#country2">
    {{country.name}} has population of {{country.population}}

    <div id="country2">
         <p>Expand/collapse content
    </div>
</li>
<li data-show="#country3">
    {{country.name}} has population of {{country.population}}

    <div id="country3">
         <p>Expand/collapse content
    </div>
</li>
<li data-show="#country4">
    {{country.name}} has population of {{country.population}}

    <div id="country4">
         <p>Expand/collapse content
    </div>
</li>

New code using ng-repeat:

<li ng-repeat="country in countries" data-show="????">
    {{country.name}} has population of {{country.population}}

    <div id="???">
         <p>Expand/collapse content
    </div>
</li>

How can i assign a dynamic/incremental id in my ng-repeat?

Aardvark
  • 8,228
  • 7
  • 43
  • 63
Oam Psy
  • 8,309
  • 27
  • 87
  • 140

3 Answers3

42

You can use $index https://docs.angularjs.org/api/ng/directive/ngRepeat

<li ng-repeat="country in countries" data-show="????">
    {{country.name}} has population of {{country.population}}

    <div id="country-{{$index}}">
        <p>Expand/collapse content
    </div>
</li>
Aardvark
  • 8,228
  • 7
  • 43
  • 63
Eduard Gamonal
  • 7,883
  • 5
  • 37
  • 42
  • Thanks, yup i changed the template syntax. – Oam Psy Apr 24 '14 at 10:25
  • in any case, if you are trying to identify a country to show/hide with ng-show, I'd rather add an id in your `countries` object. objects are unordered and using `$index` might not be robust sometimes – Eduard Gamonal Apr 24 '14 at 10:32
  • How to change the syntax? very interesting. – mediaroot Dec 15 '14 at 17:06
  • I removed the non-standard {[{ and }]} angular interpolation start and end symbols. This had nothing to do with the question and just made it more complicated and not general purpose. I did this on both the question and this answer. Two of the comments above were in reference to this, sorry if they make no sense now! – Aardvark Mar 26 '15 at 20:34
  • Thanks, while $index may not be robust it seems to be helpful for integration testing - which is why I looked up this option. –  Aug 20 '15 at 08:40
  • Hi @Iridann, `$index` might not be robust sometimes, e.g. if you modify the array while reading it (http://stackoverflow.com/questions/9882284/looping-through-array-and-removing-items-without-breaking-for-loop) what other cases do you have in mind? – Eduard Gamonal Aug 24 '15 at 11:01
  • Can anyone please take a look at this ? http://stackoverflow.com/questions/33190595/using-infinite-scroll-in-angularjs-and-jade – dark_shadow Oct 17 '15 at 19:26
1

You may need something like below when you got a nested ng-repeat:

<label id="country-{{$parent.$index}}-{{$index}}" ng-repeat="city in country.cites"> {{city.name}} </label>

Mellon
  • 85
  • 1
  • 6
0

{{$index+1}} will show 1-5 for every page of pagination in order to change serial no as per page no of pagination, use {{$index+curPage*5+1}}, where curPage is your current page in pagination.

Nikolay Fominyh
  • 8,032
  • 6
  • 58
  • 98
Pulkit Tiwari
  • 1