Пропуск 2 $ значения индекса внутри вложенного ng-repeat

Question

Итак, у меня есть ng-repeat, вложенный в другой ng-repeat, чтобы построить навигационное меню. На каждом <li> во внутреннем цикле ng-repeat я устанавливаю ng-click, который вызывает соответствующий контроллер для этого пункта меню, передавая в $ 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> 

вот Plunker http://plnkr.co/edit/bJUhI9oGEQIql9tahIJN?p=preview

Answer 1

Каждый нг-повтор создает дочернюю сферу с переданными данными, а также добавляет дополнительную $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> 

Answer 2

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

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

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

Answer 3

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

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

Answer 4

Просто, чтобы помочь кому-то, кто получит здесь ... Вы не должны использовать $ родительский $ индекс, как это не так. действительно безопасно. Если вы добавите ng-if внутри цикла, вы получите $ index messed!

Правильный способ

<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

Answer 5

Что об использовании этого синтаксиса (посмотрите в этой 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 и дифференцируются два индекса.

Answer 6

Я пытаюсь использовать решение, предлагаемое gonzalon. Но в моем случае это не работает. Я хочу иметь всплывающую подсказку с дополнительной информацией, когда мышь находится над ячейкой таблицы, которую я создаю, зацикливая на строки и ячейки.

Значения изменяются при перемещении мыши над ячейками таблицы, но значения для строки и столбца всегда являются как числом столбцов.

<div table-data="vm.tableData" ng-if= "vm.table_ready" > 

    <b2b-table> 
    <table> 
     <thead type="header"> 
      <tr> 
       <th ng-repeat = "zone in vm.tableData[0]" >{{zone}}</th> 

      </tr> 
     </thead> 

     <tbody type="body" ng-repeat="row in vm.tableData track by $index" ng-init="rowIndex = $index" ng-if="$index >0" > 
      <tr> 
       <th>{{row[0]}}</th> 
       <td headers="rowheader0" ng-repeat = "cell in row track by $index" ng-init="columnIndex = $index" ng-if="$index >0" ng-mouseover="vm.showTooltip(rowIndex, columnIndex)" ng-mouseleave="vm.hideTooltip()" > 
       {{cell[1]}} 

       </td> 
      </tr> 
     </tbody> 

    </table> 
     </b2b-table> 

</div>