AngularJS - ng-repeat для назначения/создания нового уникального идентификатора

Im использует простой ng-repeat для создания списка стран. Внутри каждого списка есть скрытая строка /div, которую можно развернуть и свернуть.

Проблема, с которой я столкнулся, заключается в том, что до того, как я представил Angular в свое приложение, я вручную жестко закодировал идентификатор элемента, например:

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

Новый код с помощью 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>

Как я могу назначить динамический/инкрементный id в моем ng-repeat?

Ответ 1

Вы можете использовать $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>

Ответ 2

{{$index+1}} отобразит 1-5 для каждой страницы разбивки на страницы, чтобы изменить серийный номер в соответствии с страницей без разбивки на страницы, используйте {{$index+curPage*5+1}}, где curPage - это ваша текущая страница в разбивке на страницы.