передача значень 2 $ в межах вкладеного ng-повтору

Таким чином, я маю ng-повторення вкладене в інший ng-повтор, щоб створити меню nav. На кожному <li>внутрішньому циклі ng-повторів я встановлюю клавішу ng, яка викликає відповідний контролер для цього пункту меню, передаючи $ index, щоб програма могла знати, який нам потрібен. Однак мені також потрібно передати індекс $ від зовнішнього ng-повтору, щоб програма знала, у якому розділі ми знаходимось, а також у якому підручнику.

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

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

Коли ви маєте справу з об’єктами, ви хочете ігнорувати прості ідентифікатори максимально зручно.

Якщо ви зміните рядок кліку на це, я думаю, ви будете добре на своєму шляху:

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

Просто використовуйте ng-repeat="(sectionIndex, section) in sections"

і це буде корисно на наступному рівні ng-повторення вниз.

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