AngularJS - 새로운 고유 ID를 할당/생성하기 위한 ng-repeat

AngularJS - 새로운 고유 ID를 할당/생성하기 위한 ng-repeat

심플을 사용하고 있습니다.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>

동적/증분 ID를 할당하려면ng-repeat?

사용할 수 있습니다.$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>

ng-repeat이 네스트 되었을 때 다음과 같은 것이 필요할 수 있습니다.

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

{{$index+1}}페이지 번호에 따라 일련 번호를 변경하려면 페이지 번호의 모든 페이지에 대해 1-5를 표시합니다.{{$index+curPage*5+1}}여기서 curPage는 페이지 번호의 현재 페이지입니다.

언급URL : https://stackoverflow.com/questions/23264789/angularjs-ng-repeat-to-assign-generate-a-new-unique-id