중첩 된 ng-repeat 내에서 2 개의 $ index 값 전달

탐색 메뉴를 작성하기 위해 다른 ng-repeat 내에 ng-repeat가 중첩되어 있습니다. <li>내부 ng-repeat 루프에서 각각 ng-click을 설정하여 $ index를 전달하여 해당 메뉴 항목의 관련 컨트롤러를 호출하여 앱에 필요한 것을 알려줍니다. 그러나 외부 ng-repeat에서 $ index를 전달해야 응용 프로그램이 우리가 어느 섹션에 있는지, 어떤 자습서를 알 수 있습니다.

<ul ng-repeat="section in sections">
    <li  class="section_title {{section.active}}" >
        {{section.name}}
    </li>
    <ul>
        <li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu($index)" ng-repeat="tutorial in section.tutorials">
            {{tutorial.name}}
        </li>
    </ul>
</ul>

여기에 Plunker가 있습니다 http://plnkr.co/edit/bJUhI9oGEQIql9tahIJN?p=preview

각 ng-repeat는 전달 된 데이터로 하위 범위를 작성하고 $index해당 범위에 추가 변수를 추가 합니다.

따라서 부모 범위까지 도달하여 사용하십시오 $index.

http://plnkr.co/edit/FvVhirpoOF8TYnIVygE6?p=preview를 참조 하십시오

<li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu($parent.$index)" ng-repeat="tutorial in section.tutorials">
    {{tutorial.name}}
</li>

$parent.$index사용하는 것보다 더 우아한 솔루션 ng-init:

<ul ng-repeat="section in sections" ng-init="sectionIndex = $index">
    <li  class="section_title {{section.active}}" >
        {{section.name}}
    </li>
    <ul>
        <li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu(sectionIndex)" ng-repeat="tutorial in section.tutorials">
            {{tutorial.name}}
        </li>
    </ul>
</ul>

플 런커 : http://plnkr.co/edit/knwGEnOsAWLhLieKVItS?p=info

이 구문을 사용하는 것은 어떻습니까 ( 이 plunker 살펴 보십시오 ). 방금 이것을 발견했고 꽤 굉장합니다.

ng-repeat="(key,value) in data"

예:

<div ng-repeat="(indexX,object) in data">
    <div ng-repeat="(indexY,value) in object">
       {{indexX}} - {{indexY}} - {{value}}
    </div>
</div>

이 구문을 사용 $index하면 두 개의 색인에 고유 한 이름을 지정 하고 구별 할 수 있습니다 .

여기에 오는 누군가를 돕기 위해 ... $ parent. $ index는 안전하지 않으므로 사용해서는 안됩니다. 루프 안에 ng-if를 추가하면 $ index가 엉망이됩니다!

올바른 방법

  <table>
    <tr ng-repeat="row in rows track by $index" ng-init="rowIndex = $index">
        <td ng-repeat="column in columns track by $index" ng-init="columnIndex = $index">

          <b ng-if="rowIndex == columnIndex">[{{rowIndex}} - {{columnIndex}}]</b>
          <small ng-if="rowIndex != columnIndex">[{{rowIndex}} - {{columnIndex}}]</small>

        </td>
    </tr>
  </table>

확인 : plnkr.co/52oIhLfeXXI9ZAynTuAJ

객체를 다룰 때, 간단한 id를 편리하게 무시하고 싶을 것이다.

클릭 라인을 이것으로 변경하면 나아갈 것입니다.

<li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu(tutorial)" ng-repeat="tutorial in section.tutorials">

또한 변경해야 할 수도 있습니다.

class="tutorial_title {{tutorial.active}}"

같은 것에

ng-class="tutorial_title {{tutorial.active}}"

참조 http://docs.angularjs.org/misc/faq을 하고 겨 클래스를 찾습니다.

그냥 사용 ng-repeat="(sectionIndex, section) in sections"

그리고 그것은 다음 단계 ng-repeat down에서 사용할 수 있습니다.

<ul ng-repeat="(sectionIndex, section) in sections">
    <li  class="section_title {{section.active}}" >
        {{section.name}}
    </li>
    <ul>
        <li ng-repeat="tutorial in section.tutorials">
            {{tutorial.name}}, Your section index is {{sectionIndex}}
        </li>
    </ul>
</ul>