ng-repeat内でng-clickなどのディレクティブをダイナミックに利用する
AngularJSで操作とデータが連動したリストを作る
AngularJSのディレクティブを利用してデータがバインドされた表やリストを作成することができます。
- ng-repeat
- ng-click
- ng-model
を利用してデータバインドされたリストを作成します。複数の行を持つデータ構造をリストとして表示し、クリック操作でデータの一部を動的に変更できるリストを作ってみます。
AngularJSのコントローラで
$scope.items
を生成したとします。そのデータ構造は以下の内容とします。
1 2 3 4 | [{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を利用して以下のようにクリック操作とモデルデータが連動したリストを作成することができます。
1 2 3 4 5 6 7 8 9 10 11 12 | <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
で即時反映することが可能です。