Angular.jsのng-repeatを入れ子にしたときに、子から親のindexを参照する

タイトルの通りですが、Angular.jsでng-repeatを入れ子で使用した時に、子から親のindexを参照する方法です。

サンプルコード

$parent.$indexで参照できるようです。

HTML

<div ng-controller="ctrl">
	<ul>
		<li ng-repeat="d in data">
			<div>{{$index}}: {{d.title}}</div>
			<ul>
				<li ng-repeat="c in d.chara">{{$parent.$index}} - {{$index}}: {{c}}</li>
			</ul>
		</li>
	</ul>
</div>

JavaScript

angular.module('app', []).controller('ctrl', function($scope) {
	$scope.data = [
		{
			title: 'けいおん!',
			chara: ['平沢 唯', '秋山 澪', '田井中 律', '琴吹 紬', '中野 梓']
		}, {
			title: '三者三葉',
			chara: ['西川 葉子', '葉山 照', '小田切 双葉']
		}, {
			title: 'ゆゆ式',
			chara: ['野々原 ゆずこ', '日向 縁', '櫟井 唯']
		}
	];
});

ng-repeatで親のindexを参照するデモページ
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年11月
 12
3456789
10111213141516
17181920212223
24252627282930