Индекс доступа родительского 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
Кажется, это работает правильно для меня. Я написал план действий, чтобы показать, как он работает: plnkr.co/edit/BenCDh4NUGPPHKWGsGMr?p=preview Можете ли вы предоставить более подробную информацию?
Пиран

Спасибо вам за это. Это привело меня к обнаружению, что моя проблема была ошибкой в ​​моей разметке.
Coder1

@ Coder1, рассмотрите возможность удаления этого вопроса.
Марк Райкок

7
@MarkRajcok Я думал об этом вчера вечером, но подумал, что это будет полезно для других, ищущих, как это сделать, поэтому я оставил это.
Coder1

2
Что ж, если вы хотите оставить его, пожалуйста, добавьте ответ и примите его (чтобы этот вопрос не остался в списке «без ответа»).
Марк Райкок

Ответы:


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. Для меня это похоже на угловую ошибку
Эндрю Грей,

Могу ли я сделать что-то подобное, если у меня есть одно повторение коллекции вместе с ng-repeat? Очевидно, он возвращает undefined, делая то же самое
Ali Sadiq

6
Просто чтобы добавить - вам нужен дополнительный $ parent, даже если у вас есть ng-ifкод, как я только что узнал.
Пластическая роща

@PlastyGrove Спасибо за указание, что ng-ifтребует и дополнительную $parentссылку. Избавил меня от головной боли.
Ииминов

219

Согласно документам ng-repeat 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.


Я не понимаю примечание. Разве не весь смысл этого вопроса, потому что это не так?
Адам-Бек

16
Это должен быть подтвержденный ответ, поскольку он чище, чем $parent.$indexодин
tdebroc

1
@ adam-beck Я думаю, они имеют в виду, что при использовании этого (fIndex, f)метода, $ index все равно будет определен (не опущен) - так что индекс станет доступным как $indexи fIndex.
Самуэль Яешке

1
В моем случае использование $indexне работает, но добавление fIndexделает. Я не имею ни малейшего понятия о том, почему $index не работает (это работает в других местах в моем коде), но после нескольких дней борьбы я перестал заботиться, когда нашел этот ответ. Это также немного более читабельно, когда у вас несколько ng-repeatIMO.
Krøllebølle

@ Krøllebølle Причина, по которой он работает так, как вы видите, состоит в том, что каждая ng-repeatитерация создает свою собственную область, которая также определяет свою собственную $index, перезаписывая родительскую область $index. Если вы добавите {{$index}}правый ng-repeatэлемент выше или ниже самого внутреннего элемента, вы увидите значение родительского элемента, а если поместить его в ng-repeatэлемент с самым внутренним значением, будет показано значение дочернего элемента. Использование подхода в этом ответе просто присваивает родительский индекс переменной, имя которой вы выбрали ( fIndex), чтобы она не перезаписывалась дочерней областью.
Тавнаб

44

Посмотрите на мой ответ на аналогичный вопрос .
Используя псевдонимы, $indexмы не должны писать такие сумасшедшие вещи, как $parent.$parent.$index.


Более элегантное решение, чем $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


3
и это безопаснее! если вы добавите ng-if внутри цикла, вы получите беспорядочный индекс $, проверьте: plnkr.co/52oIhLfeXXI9ZAynTuAJ
gonzalon

Я должен был сделать sectionIndex = $ parent. $ Index
Beanwah

Переменная не обновляется, если вы удаляете элемент, который был в массиве повторов. $ index и $ parent. $ index всегда безопасный выбор
Бхарат Бхандаркар

12

Вы также можете получить контроль над индексом прародителя с помощью следующего кода

$parent.$parent.$index

1
Это хорошо работает для моего проекта. Спасибо за предоставление отличного решения!
Кане Роберн

Это не расширяемо, по-видимому.
Ганеш Велланки

К сожалению, это в некоторой степени пример зависти к функциям и, очевидно, проблематично во многих случаях.
ChiefTwoPencils

2

Вы можете просто использовать use $ parent. $ Index .where 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, вы напрашиваетесь на неприятности, когда меняется контекст вашего кода.
Шонхусейн
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.