[解決済み] ネストした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>
関連
-
[解決済み】TypeError: window.initMap is not a function
-
[解決済み] AngularJSのng-showとフェードアニメーション
-
[解決済み] ディレクティブ '...' が要求するコントローラ 'ngModel' が見つかりません。
-
[解決済み] AngularJS : ローカルストレージを使用する
-
[解決済み] AngularJS 。scope.apply()呼び出し時の$digest already in progressエラーを防ぐ。
-
AngularJSのベストプラクティス。ng-repeatの$indexに注意する。
-
角型グローバル確認ボックス
-
angularでのng-repeatとtrack by
-
[解決済み] Angular.js: $evalの仕組みとバニラevalとの違いは何ですか?
-
[解決済み] AngularJSのng-repeatでキーと値を反復処理する方法は?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
angularjs ローカルデータストレージ LocalStorage
-
[解決済み】Angular ui-routerで$stateメソッドを$stateChangeStart toStateとfromStateで使用する。
-
[解決済み] オブジェクトと選択機能を備えたAngularJS BootstrapUI Typeahead
-
[解決済み] X-Frame-Options'を'SAMEORIGIN'に設定しているため、フレーム内での表示を拒否された。
-
[解決済み] select 要素のデフォルト値を設定するための ng-option の使用方法
-
[解決済み] AngularJSのグローバル変数
-
[解決済み] Angular JS $locationChangeStart 次の url ルートオブジェクトを取得する
-
[解決済み] Angular JSによるシンプルなポップアップ
-
[解決済み] angular.serviceとangular.factoryの比較
-
[解決済み] ng-classを使った複数クラスの追加