передача 2 $ значений индекса во вложенном ng-repeat

Итак, у меня есть ng-repeat, вложенный в другой ng-repeat, чтобы создать навигационное меню. Для каждого <li>внутреннего цикла ng-repeat я устанавливаю ng-click, который вызывает соответствующий контроллер для этого пункта меню, передавая $ index, чтобы приложение узнало, какой из них нам нужен. Однако мне нужно также передать $ index из внешнего ng-repeat, чтобы приложение знало, в каком разделе мы находимся, а также в каком учебнике.

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

вот плункер 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

Как насчет использования этого синтаксиса (взгляните на этот плункер ). Я только что обнаружил это, и это довольно здорово.

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. $, Поскольку это не совсем безопасно. Если вы добавите 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

Когда вы имеете дело с объектами, вы хотите игнорировать простые идентификаторы настолько, насколько это удобно.

Если вы измените строку клика на это, я думаю, что вы будете хорошо на вашем пути:

<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-класс.

Просто использовать 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>