it-swarm.com.ru

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

Я использую простой 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>

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

24
Oam Psy

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

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

0
Pulkit Tiwari