1. ホーム
  2. angularjs

[解決済み] ネストしたng-repeatの中で2つの$index値を渡す

2022-03-26 05:06:31

質問

ナビメニューを作るために、ng-repeatの中に別のng-repeatを入れ子にしています。それぞれの <li> 内側のng-repeatループでng-clickを設定し、$indexを渡してそのメニューアイテムの関連するコントローラを呼び出し、アプリにどれが必要かを知らせます。しかし、外側の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>

プランカーはこちら 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>