네스트된 ng-dex 내에서 2개의 $index 값 전달

네스트된 ng-dex 내에서 2개의 $index 값 전달

네비게이션 메뉴를 만들기 위해 ng-repeat을 다른 ng-repeat에 네스트합니다.각각에 대해서<li>내부 ng-repeat 루프에서 $index를 전달하여 해당 메뉴 항목에 해당하는 컨트롤러를 호출하는 ng-click을 설정하여 앱에 필요한 컨트롤러를 알려드립니다.그러나 앱이 우리가 어느 섹션에 있는지와 튜토리얼을 알 수 있도록 외부 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는 다음을 사용하고 있습니다.

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

Pluker: http://plnkr.co/edit/knwGEnOsAWLhLieKVItS?p=info

이 구문을 사용하는 것은 어떻습니까(이 플런커를 참조해 주세요).방금 이걸 발견했는데 정말 대단해요.

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

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

다음 레벨 ng-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>

오브젝트를 취급할 때는 간단한 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-class 를 찾습니다.

언급URL : https://stackoverflow.com/questions/15256600/passing-2-index-values-within-nested-ng-repeat