Oam Psy Oam Psy - 1 month ago 12
AngularJS Question

AngularJS - ng-repeat to assign/generate a new unique ID

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
?

Answer

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>
Comments