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?
Sie können $index
https://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>
{{$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.