하위 ng-repeat에서 상위 ng-repeat의 액세스 색인


218

부모 목록 (foos)의 색인을 자식 목록 (foos.bars)의 함수 호출에 대한 인수로 사용하고 싶습니다.

누군가가 $ parent. $ index 사용을 권장하는 게시물을 찾았지만 $index의 속성이 아닙니다 $parent.

부모의 인덱스에 어떻게 액세스 할 수 ng-repeat있습니까?

<div ng-repeat="f in foos">
  <div>
    <div ng-repeat="b in foos.bars">
      <a ng-click="addSomething($parent.$index)">Add Something</a>
    </div>
  </div>
</div>

2
그것은 나를 위해 올바르게 작동하는 것 같습니다. : 나는 작업을 보여줄 수있는 plunker 쓴 한 plnkr.co/edit/BenCDh4NUGPPHKWGsGMr?p=preview 캔하면 자세한 내용을 제공을?
Piran

고마워 내 문제가 마크 업의 버그라는 것을 알게되었습니다.
Coder1

@ Coder1,이 질문을 삭제하십시오.
Mark Rajcok

7
@MarkRajcok 나는 지난 밤에 그것을 고려했지만, 이것을하는 방법을 찾는 다른 사람들에게 도움이 될 것이라고 생각했기 때문에 떠났습니다.
Coder1

2
글쎄, 당신이 그것을 유지하려면 답변을 추가하고 동의하십시오 (따라서이 질문은 "답변되지 않은"목록에 남아 있지 않습니다).
Mark Rajcok

답변:


279

내 예제 코드가 정확하고 문제는 실제 코드의 다른 문제였습니다. 아직도, 나는 이것의 예를 찾기가 어렵다는 것을 알고 있으므로 다른 사람이 찾고있는 경우에 대답하고 있습니다.

<div ng-repeat="f in foos">
  <div>
    <div ng-repeat="b in foos.bars">
      <a ng-click="addSomething($parent.$index)">Add Something</a>
    </div>
  </div>
</div>

13
또한-이것은 잠시 동안 나를 던졌습니다. 코드 내에 data-ng-switch 지시문이 있으면 추가 범위 수준 ($ parent. $ parent. $ index)으로 올라 가야합니다. 예쁘지 않아요
Hairgami_Master

동의했다. 올바른 값을 얻으려면 $ parent. $ parent. $ index를 컨트롤러 함수에 전달한 다음 ng-show를 $ parent. $ index에 바인딩해야했습니다. 나에게 각도 버그처럼 보인다
Andrew Gray

? 나는 겨 반복과 함께 하나의 컬렉션 반복이 있다면 나는 분명히이 같은 일을 정의되지 않은 반환 같은 것을 할 수
알리 사 디크

6
추가하기 위해 ng-if방금 찾은 코드에 코드 가 있더라도 추가 $ parent가 필요합니다 .
Plasty Grove

@PlastyGrove ng-if요구 사항 및 추가 $parent참조 사항 을 지적 해 주셔서 감사합니다 . 두통을 덜어주었습니다.
iiminov

219

ng-repeat docs http://docs.angularjs.org/api/ng.directive:ngRepeat 에 따르면 키 또는 배열 색인을 선택한 변수에 저장할 수 있습니다.(indexVar, valueVar) in values

그래서 당신은 쓸 수 있습니다

<div ng-repeat="(fIndex, f) in foos">
  <div>
    <div ng-repeat="b in foos.bars">
      <a ng-click="addSomething(fIndex)">Add Something</a>
    </div>
  </div>
</div>

한 수준은 $ parent. $ index로 여전히 깨끗하지만 여러 부모는 문제가 발생할 수 있습니다.

참고 : $index각 범위에서 계속 정의되며로 대체되지 않습니다 fIndex.


노트를 이해하지 못합니다. 이 질문의 요점이 사실이 아니기 때문에 그렇지 않습니까?
adam-beck

16
는 것보다 더 깨끗 이것은 검증 된 답변을해야 $parent.$index하나
tdebroc

1
@ adam-beck 나는 그들이이 (fIndex, f)방법 을 사용할 때 $ index가 여전히 정의 될 것이므로 (생략되지 않음) 인덱스가 $index및 로 액세스 할 수 있음을 의미한다고 생각 fIndex합니다.
Samuel Jaeschke

1
내 경우에는 사용 $index이 작동하지 않지만 추가 fIndex는 사용합니다. $index 작동하지 않는지에 대한 단서 가 없지만 (내 코드의 다른 곳에서), 며칠 동안 고군분투 한 후이 답변을 찾았을 때 돌보는 것을 멈췄습니다. 또한 여러 개의 ng-repeatIMO 가있는 경우 좀 더 읽기 쉽습니다.
Krøllebølle

@ Krøllebølle 그것이 당신이 보는 방식대로 작동하는 이유는 각 ng-repeat반복이 자체 범위를 생성하고 자체 범위를 정의 $index하여 부모의를 덮어 쓰기 때문 $index입니다. {{$index}}가장 안쪽의 ng-repeat-ed 요소 바로 위 또는 아래에 포함 시키면 부모의 값 ng-repeat이 표시 되고 가장 안쪽의 -ed 요소 안에 넣으면 자녀의 값 이 표시됩니다. 이 답변의 접근 방식을 사용하면 부모 인덱스가 이름이 선택된 변수에 부모 인덱스를 할당 fIndex하므로 자식 범위로 덮어 쓰지 않습니다.
tavnab

44

비슷한 질문에 대한 내 대답을 살펴보십시오 .
앨리어싱 $index을 통해 같은 미친 물건을 쓸 필요는 없습니다 $parent.$parent.$index.


ng-init$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>

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


3
또한 더 안전합니다! : 당신이 추가하면 루프 내부에, 당신이 얻을 NG를하는 경우-은 $ 지수는 체크 엉망 plnkr.co/52oIhLfeXXI9ZAynTuAJ
gonzalon

sectionIndex = $ parent. $ index
Beanwah

반복 배열에 있던 요소를 삭제하면 변수가 업데이트되지 않습니다. $ index와 $ parent. $ index는 항상 안전한 선택입니다
Bharath Bhandarkar

12

다음 코드로 Grand Parent Index를 제어 할 수도 있습니다.

$parent.$parent.$index

1
이것은 내 프로젝트에 잘 작동합니다. 멋진 솔루션을 제공해 주셔서 감사합니다!
Canet Robern

이것은 분명히 확장 할 수 없습니다.
Ganesh Vellanki

불행히도, 이것은 기능 부러워하고 명백히 많은 문제의 예입니다.
ChiefTwoPencils

2

use $ parent. $ index을 사용하면됩니다. 여기서 parent는 부모 반복 객체의 객체를 나타냅니다.


0

부모가 여러 명인 경우 $ parent가 작동하지 않습니다. 대신에 init에서 부모 인덱스 변수를 정의하고 사용할 수 있습니다

<div data-ng-init="parentIndex = $index" ng-repeat="f in foos">
  <div>
    <div data-ng-init="childIndex = $index" ng-repeat="b in foos.bars">
      <a ng-click="addSomething(parentIndex)">Add Something</a>
    </div>
  </div>
</div>

여기 vucalur의 답변을 참조하십시오. 일반적으로 이것은 올바른 IMO 방법이며 일반적으로 ng-init에만 올바르게 사용됩니다. 사람들이 최대 $ parent에 도달 할 때마다 코드 컨텍스트가 변경 될 때 문제가 발생합니다.
shaunhusain
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.