angularJSの深いネストしたngRepeatで異なるレベルの$indexを取得する方法
2022-02-18 20:05:57
参考記事
Angularでハックする。深くネストしたngRepeatで異なるレベルの$indexを取得する方法
<div class="btn-group" ng-repeat="type in types" ng-init="outerIndex = $index">
<button type="button" class="btn btn-default">{
{type.name}}</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup=" true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#" ng-repeat="status in statuses" ng-click="doSomething(outerIndex,$index)">{
{status.name}}</a>
</li>
</ul>
</div>
ポイントは、最初のループ、最初のng-repeatの後にng-initを使用して、外側の$indexの値を格納する変数(outerIndex)を定義し、内側のループで、$indexを使って内側のループの$indexにアクセスしつつ、この変数(outerIndex)を使用できるようにすることである。
関連
-
Vueの一般的な組み込みディレクティブの説明
-
[解決済み】Uncaught SyntaxError: JSONの位置0に予期しないトークンuがあります。
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み】TypeError: Router.use() はミドルウェアの関数を要求しているが、Object を取得した。
-
[解決済み】ERROR エラーです。スイッチのname属性が指定されていないフォームコントロールの値アクセッサがない
-
[解決済み】 `string.split is not a function` というエラーの原因は何ですか?
-
[解決済み】React-Redux: アクションはプレーンオブジェクトでなければならない。非同期アクションにはカスタムミドルウェアを使用する
-
フロントエンド非同期(アシンク)ソリューション(全ソリューション)
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。
-
ajaxの役割
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
vueはopenlayersを使用してスカイマップとガオードマップをロードする
-
vueの補間表現とv-textディレクティブの違いについて
-
[解決済み】React Nativeアプリをターミナルから実行するとエラーが発生する(iOS)
-
[解決済み】gulp anythingを実行するたびに、アサーションエラーが発生します。- タスク関数を指定する必要があります
-
[解決済み】JavaScriptでインラインIF文の書き方は?
-
[解決済み】React Uncaught Error: 対象コンテナが DOM 要素でない [重複]。
-
[解決済み】<select>で現在選択されている<option>をJavaScriptで取得するにはどうすればよいですか?
-
JavaScriptのgetElementById、getElementsByTagNam、getElementsByClassNameの違いと使い方
-
スーパー式は null か関数でなければならず、未定義ではない エラーの報告および解決方法