ng-repeat内でng-clickなどのディレクティブをダイナミックに利用する

AngularJSで操作とデータが連動したリストを作る

AngularJSのディレクティブを利用してデータがバインドされた表やリストを作成することができます。

• ng-repeat
• ng-click
• ng-model

を利用してデータバインドされたリストを作成します。複数の行を持つデータ構造をリストとして表示し、クリック操作でデータの一部を動的に変更できるリストを作ってみます。

AngularJSのコントローラで

$scope.items

を生成したとします。そのデータ構造は以下の内容とします。

[
{Item:{id:"1", count:"1", type:"A", modified:"2014-04-01 00:00:00"}}, 
{Item:{id:"2", count:"8", type:"B", modified:"2014-04-02 00:00:00"}}
]

ng-repeatを利用して以下のようにクリック操作とモデルデータが連動したリストを作成することができます。

<div ng-controller="ItemCtrl">
	<div ng-repeat="e in items">
		<ul class='inline'>
			<li><a ng-click='plusCount($index)'>link</a></li>
			<li><span ng-model='e.Item.count'>{{e.Item.count}}</span></li>
			<li><a ng-click='changeType($index)'>link</a></li>
			<li><span ng-model="e.Item.type">{{e.Item.type}}</span></li>
			<li>modyfied date</li>
			<li><span ng-model='e.Item.modyfied'>{{e.Item.modyfied}}</span></li>
		</ul>
	</div>
</div>

ng-clickで設定しているメソッドに渡している

$index

という引数で、リストの添え字(インデックス番号)をパラメータとして設定することができますので、複数行からなるデータ構造でも特定の行のデータのみを操作して、

ng-model

で即時反映することが可能です。