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

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

Проблема, с которой я столкнулся, заключается в том, что до того, как я ввел 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?


angularjs angularjs-directive angularjs-ng-repeat angularjs-scope ng-repeat
person Oam Psy    schedule 24.04.2014    source источник

Ответы (3)


arrow_upward
42
arrow_downward

Вы можете использовать $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>
person Eduard Gamonal    schedule 24.04.2014
comment
Спасибо, да, я изменил синтаксис шаблона. - person Oam Psy; 24.04.2014
comment
в любом случае, если вы пытаетесь определить страну для отображения/скрытия с помощью ng-show, я бы предпочел добавить идентификатор в ваш объект countries. объекты неупорядочены, и использование $index иногда может быть ненадежным - person Eduard Gamonal; 24.04.2014
comment
Как изменить синтаксис? очень интересно. - person mediaroot; 15.12.2014
comment
Я удалил нестандартные {[{ и }]} начальные и конечные символы угловой интерполяции. Это не имело никакого отношения к вопросу, а просто усложняло его, а не имело общего назначения. Я сделал это как по вопросу, так и по этому ответу. Два комментария выше относились к этому, извините, если сейчас они не имеют смысла! - person Aardvark; 26.03.2015
comment
Спасибо, хотя $index может быть ненадежным, он кажется полезным для интеграционного тестирования, поэтому я искал этот вариант. - person ; 20.08.2015
comment
Привет @Iridann, $index иногда может быть ненадежным, например. если вы измените массив во время его чтения (stackoverflow.com/questions/9882284/) какие еще случаи вы имеете в виду? - person Eduard Gamonal; 24.08.2015
comment
Кто-нибудь может взглянуть на это? stackoverflow.com/questions/33190595 / - person dark_shadow; 17.10.2015

arrow_upward
1
arrow_downward

Вам может понадобиться что-то вроде ниже, когда у вас есть вложенный ng-repeat:

<label id="country-{{$parent.$index}}-{{$index}}" ng-repeat="city in country.cites"> {{city.name}} </label>

person Mellon    schedule 27.12.2019

arrow_upward
0
arrow_downward

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

person Pulkit Tiwari    schedule 15.10.2016