usar - AngularJS-ng-repeat para asignar/generar una nueva ID única

ng select option example

Question

Estoy usando una simple ng-repeat para generar una lista de países. Dentro de cada lista hay una fila / div oculta que se puede expandir y contraer.

El problema al que me enfrento es que antes de introducir Angular en mi aplicación, codifiqué manualmente el ID del elemento, por ejemplo:

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

Nuevo código usando 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>

¿Cómo puedo asignar una identificación dinámica / incremental en mi ng-repeat ?

Answer 1

Puede usar $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>

Answer 2

{{$index+1}} mostrará 1-5 para cada página de paginación para cambiar el número de serie según la página de paginación, use {{$index+curPage*5+1}} , donde curPage es su actual Pagina en paginación.