AngularJS TIPS
モデルへの入出力に際して処理を介するには？（ng-model-options）
入力フォームとモデルをバインドした際に、独自のゲッター／セッター関数を仲介させることで、そのモデルに出し入れする値を検証／加工する方法を説明する。
ng-modelディレクティブを利用することで、フォームからの入力とモデル（スコープオブジェクトのプロパティ）とをコーディングレスでひも付けられるのは、AngularJSの大きな特徴の一つです（詳細は、別稿「TIPS：モデルをテキストボックスなどのフォーム要素にバインドするには？」も参照してください）。
もっとも、モデルに対して値を出し入れする際に、値を検証／加工したいこともあるかもしれません。そのような場合には、ng-model-optionsディレクティブでgettersetterパラメーターを設定します。gettersetterパラメーターをtrue（デフォルトはfalse）とした場合、ng-model属性にひも付いた関数を、モデル出し入れのためのゲッター／セッターメソッドとして利用するようになります。
具体的な例も見てみましょう。以下は、モデルへの出し入れを、nameメソッドを介して行うサンプルです。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<p>
<label for="name">名前：</label>
<input id="name" name="name" type="text" ng-model="user.name"
ng-model-options="{ getterSetter: true }" />
</p>
<div>入力した名前：<span ng-bind="user.name()"></span></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', '$log', function($scope, $log) {
$scope.user = {
_name: '鈴木太郎［加工対象］',
name: function(value) {
if (angular.isUndefined(value)) {
// ゲッター： 取得時に、加工されているモデル値を表示用に元に戻す
return this._name.substr(0, this._name.lastIndexOf('［'));
} else {
// セッター： 設定時に、表示値をモデル用に加工する
this._name = value + '［ここから値を加工］';
$log.debug(this._name); // デバッグ用にモデル値をコンソール出力
}
}
};
}]);
</script>
</body>
</html>
|
ゲッター／セッター（上記のコード例におけるname関数）と、実際にモデルを格納するための変数（コード例の_name変数）は、オブジェクトとして1つにまとめておきます（＝$scope.userオブジェクト）。ゲッター／セッターは、引数（コード例ではvalue）として入力値を受け取れるようにしておきます。あとは、angular.isUndefinedメソッドがtrueの場合（＝引数が渡されなかった場合）にはモデルの現在値を（加工前の状態に戻すなどして）返し、falseの場合は入力値を（加工するなどしたうえで）モデルに設定するようにします。
この例では、表示上の値は加工／変換などが発生しているようには見えませんので注意してください（※ブラウザーの開発者ツールを確認することで、格納されたモデル値を確認できますので、表示値とモデル値の違いを確認してみてください）。より一般的には、取得時にデータを加工／変換したり、設定時に（加工／変換だけでなく）値の正否を検証したりするためのコードを伴うことになるでしょう。
処理対象：入力検証 カテゴリ：基本
処理対象：モデル値の加工 カテゴリ：基本
API：ngModelOptions（ng-model-options）｜ngBind（ng-bind） カテゴリ：ng（コアモジュール） > directive（ディレクティブ）
API：angular.isUndefined｜angular.isDefined カテゴリ：ng（コアモジュール） > function（関数）
※以下では、本稿の前後を合わせて5回分（第60回～第64回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
60. 不正な入力値もモデルに反映させるには？（ng-model-options）
入力フォームに検証機能を付けた場合、デフォルトでは不正値はモデルに反映されない。この制限を回避して反映させる方法を説明する。
61. 日付／時刻値を入力する際にタイムゾーンを加味するには？（ng-model-options）
ng-model-optionsディレクティブにtimezoneパラメーターを指定することで、タイムゾーンによる時差を加味した日時を＜input＞要素から取得する方法を説明する。
62. 【現在、表示中】≫ モデルへの入出力に際して処理を介するには？（ng-model-options）
入力フォームとモデルをバインドした際に、独自のゲッター／セッター関数を仲介させることで、そのモデルに出し入れする値を検証／加工する方法を説明する。
63. 複数のコントローラー間で共有すべき値を管理するには？（valueメソッド）
より実践的なアプリ開発を行うためにアプリ固有の処理ロジック（今回はvalueメソッドにより管理する「値」）をサービスとして切り出し、それを呼び出す方法を説明する。
64. 複数のコントローラー間で共有すべき値を管理するには？（constantメソッド）
より実践的なアプリ開発を行うためにアプリ固有の処理ロジック（今回はconstantメソッドにより管理する「値」）をサービスとして切り出し、それを呼び出す方法を説明する。
