it-swarm.com.de

AngularJS - ng-repeat zum Zuweisen/Generieren einer neuen eindeutigen ID

Ich benutze einen einfachen ng-repeat, um eine Liste von Ländern zu erstellen. In jeder Liste befindet sich eine ausgeblendete Zeile/Div, die erweitert und reduziert werden kann.

Das Problem, vor dem ich stehe, ist, dass ich vor der Einführung von Angular in meine Anwendung die ID des Elements manuell hartcodiert habe.

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

Neuer Code mit 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>

Wie kann ich in meinem ng-repeat eine dynamische/inkrementelle ID zuweisen?

24
Oam Psy

Sie können $indexhttps://docs.angularjs.org/api/ng/directive/ngRepeat verwenden.

<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}} zeigt 1-5 für jede Seite der Paginierung an, um die Seriennummer entsprechend der Seitennummer der Paginierung zu ändern. Verwenden Sie {{$index+curPage*5+1}}, wobei curPage Ihre aktuelle Seite in der Paginierung ist.

0
Pulkit Tiwari