AngularJS TIPS
入力値のモデルへの反映タイミングを変更するには？（ng-model-options）
AngularJSのデータバインディング機能により入力値がモデルに反映されるのを、指定したミリ秒数後やフォーカスが外れたときまで遅延させる方法を説明する。
- 対象：AngularJS 1.3以降
別稿「TIPS：モデルをテキストボックスなどのフォーム要素にバインドするには？」でも見たように、AngularJSでは入力された値を即座にモデルに反映します。しかし、アプリの性質によっては、「即座にページに反映されるのが目障り」「モデルの更新によって非同期通信が発生する場合、通信が頻繁に発生しすぎる」などの問題が出てくるかもしれません。
そのような場合、ng-model-options属性を利用することで、モデルの更新タイミングを変更することが可能です。
モデルを更新するイベントを指定する
まずは、モデルを（キー入力時ではなく）テキストボックスからフォーカスを外したタイミングで反映させる例から見ていきます。
|
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body>
<form>
<label for="name">名前：</label>
<input id="name" name="name" type="text" ng-model="name"
ng-model-options="{ updateOn: 'blur' }" />
<div>{{"こんにちは、" + name + "さん！"}}</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</body>
</html>
|
ng-model-options属性は「パラメーター名: 値」のハッシュ形式で指定できます。updateOnパラメーターには、モデル更新のトリガーとなるイベントを指定します。
［Note］ng-model-options属性の適用範囲
ng-model-options属性は、現在の要素配下に対して影響を及ぼします。ここではテキストボックスに直接、ng-model-options属性を指定していますが、もしもフォーム全体に対して設定したいならば、<form>要素に対してng-model-options属性を付与しても構いません。
モデル更新を遅延させる
bounceパラメーターを利用することで、モデル更新のタイミングを遅延させることもできます。例えば以下は、キー入力から3000ミリ秒後にモデルを更新する例です。
|
<label for="name">名前：</label>
<input id="name" name="name" type="text" ng-model="name"
ng-model-options="{ ▲debounce: 3000 }" />
<div>{{"こんにちは、" + name + "さん！"}}</div>
|
条件によってモデルの更新タイミングを変更する
updateOn／bounceパラメーターを組み合わせることで、例えば「キー入力時には3000ミリ秒の遅延でモデルを更新し、フォーカスが外れた時には即座に更新」するといった挙動も指定できます。
|
<label for="name">名前：</label>
<input id="name" name="name" type="text" ng-model="name"
ng-model-options="{ updateOn: 'default blur',
debounce: {'default': 3000, 'blur': 0}
}" />
<div>{{"こんにちは、" + name + "さん！"}}</div>
|
updateOn／bounceパラメーターで指定しているdefaultは、その要素でのデフォルトイベント（ここではキー入力）を表します。bounceパラメーターでは、イベント名: ミリ秒の形式で、イベント単位に遅延時間を指定できます。
※以下では、本稿の前後を合わせて5回分（第15回～第19回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
15. 式の真偽に応じて表示を切り替えるには？（ng-messages／ng-message）
条件式の値に応じてメッセージの表示／非表示を切り替えるために（例えばエラー時にメッセージ表示するなど）、ng-messages／ng-message属性を使用する方法を解説する。
16. 別ファイルやJavaScriptでメッセージを管理するには？（ng-message-include／ng-message-exp）
ng-messages属性で使用するメッセージを、ページ内でテンプレート化したり、外部ファイル化したりして効率的に管理する方法を説明する。
17. 【現在、表示中】≫ 入力値のモデルへの反映タイミングを変更するには？（ng-model-options）
AngularJSのデータバインディング機能により入力値がモデルに反映されるのを、指定したミリ秒数後やフォーカスが外れたときまで遅延させる方法を説明する。
18. 文字列を大文字／小文字に変換するには？（lowercase／uppercase）
lowercase／uppercaseフィルターを使って文字列を大文字や小文字に変換する方法を解説。また、JavaScriptコードから変換する場合に使える$filterサービスとangular.lowercase／angular.uppercaseメソッドについても紹介する。
