この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
車輪開発大好きおたいがです。こんにちは。(挨拶)
前回記事で紹介した 'cmEditableText' ディレクティブを用いた応用例として、次のようなサンプルを作ってみました。
サンプル
'First Name' と 'Last Name' の列にあるセルをダブルクリックすると、セルの中身が編集できます。( PC のみ対応 )
cmEditableText の売り
<td> 要素に 'cm-editable-text' と追記するだけで編集可能なセルになります。
Table 行は ngRepeat を利用してコレクション ( 配列 ) を元に構築するので、行に対するモデルの定義は以下のようにします。
<tbody>
<tr ng-repeat="item in items">
<td><input type="checkbox" ng-model="item.checked"></td><!-- チェックボックス -->
<td>{{$index}}</td><!-- 行番号 -->
<td cm-editable-text ng-model="item.firstName" /><!-- 名前 -->
<td cm-editable-text ng-model="item.lastName" /><!-- 苗字 -->
<td><button ng-click="removeRow($index)">delete</button></td><!-- 行削除ボタン -->
</tr>
</tbody>
$scope.$watchCollection() でコレクションを監視
AngularJS には $scope.$watchCollection() というコレクション監視用のメソッドが用意されており、Table の外観を構築するようなモデルを監視するときに重宝します。サンプルの場合 Table 行の追加や削除が行われたときに、このメソッドで登録したリスナーのコールバック関数が実行されて、<textarea> 要素内の出力情報が更新されます。
//scope.$watchCollection() の戻り値は実行すると「登録したリスナーを解放する」関数
var collectionWatcher = $scope.$watchCollection('collectionName',
function(newCollection, oldCollection, scope) {
//TODO:
}
);
まとめ
cmEditableText の機能はオマケのようなもので、ngRepeat と scope.$watchCollection() があれば Table のデータを簡単に料理できる…ということがご理解いただければ幸いです。