ネストされたng-repeat内で2つの$ index値を渡す

したがって、ナビゲーションメニューを作成するために、ng-repeatが別のng-repeat内にネストされています。<li>内部のng-repeatループのそれぞれに、$ indexを渡して必要なものをアプリに通知することにより、そのメニュー項目に関連するコントローラーを呼び出すng-clickを設定しました。ただし、外部のng-repeatから$ indexも渡す必要があるので、アプリはどのセクションにいるか、どのチュートリアルかを認識しています。

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

この構文の使用についてはどうですか（この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と、2つのインデックスに独自の名前を付けて区別できます。

ここに来る人を助けるためだけに...それは本当に安全ではないので、$ parent。$ indexを使用しないでください。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

オブジェクトを扱うときは、単純なIDをできるだけ便利に無視したいとします。

クリック線をこれに変更すると、うまくいくと思います。

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