web-dev-qa-db-ja.com

AngularJS-ng-repeatで新しい一意のIDを割り当て/生成

シンプルなng-repeatを使用して国のリストを生成しています。各リスト内には、展開および折りたたみ可能な非表示の行/ divがあります。

私が直面している問題は、アプリケーションにAngularを導入する前に、要素のIDを手動でハードコーディングしたことです。たとえば：

<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で動的/増分IDを割り当てるにはどうすればよいですか？

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

$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>
39
Eduard Gamonal

{{$index+1}}は、ページ番号のページごとに1〜5を表示します。ページ番号のページごとにシリアル番号を変更するには、{{$index+curPage*5+1}}、curPageはページネーションの現在のページです。

0
Pulkit Tiwari