[AngularJS] データグリッド的な編集可能 Table サンプル

車輪開発大好きおたいがです。こんにちは。（挨拶）

前回記事で紹介した '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 のデータを簡単に料理できる…ということがご理解いただければ幸いです。