web-dev-qa-db-fra.com

AngularJS - ng-repeat pour assigner/générer un nouvel identifiant unique

J'utilise un simple ng-repeat pour générer une liste de pays. Dans chaque liste se trouve une rangée/div masquée qui peut être développée et réduite.

Le problème auquel je suis confronté est qu'avant d'introduire Angular dans mon application, je codais manuellement l'ID de l'élément,

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

Nouveau code utilisant 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>

Comment puis-je attribuer un identifiant dynamique/incrémental dans mon ng-repeat?

angularjsangularjs-directiveangularjs-scopeangularjs-ng-repeatng-repeat
24
Oam Psy

Vous pouvez utiliser $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}} affichera 1 à 5 pour chaque page de pagination afin de changer le numéro de série selon le numéro de page, utilisez {{$index+curPage*5+1}}, où curPage est votre page actuelle de pagination.

0
Pulkit Tiwari