AngularJS - ng-repeat to assign/generate a new unique ID
53,541
Solution 1
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>
Solution 2
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>
Related videos on Youtube
Author by
Oam Psy
Updated on July 09, 2022Comments
-
Oam Psy almost 2 years
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
? -
Oam Psy about 10 yearsThanks, yup i changed the template syntax.
-
Eduard Gamonal about 10 yearsin 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 -
mediaroot over 9 yearsHow to change the syntax? very interesting.
-
Aardvark about 9 yearsI 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!
-
Admin over 8 yearsThanks, while $index may not be robust it seems to be helpful for integration testing - which is why I looked up this option.
-
Eduard Gamonal over 8 yearsHi @Iridann,
$index
might not be robust sometimes, e.g. if you modify the array while reading it (stackoverflow.com/questions/9882284/…) what other cases do you have in mind? -
dark_shadow over 8 yearsCan anyone please take a look at this ? stackoverflow.com/questions/33190595/…