AngularJS TIPS
式の真偽に応じて表示を切り替えるには？（ng-messages／ng-message）
条件式の値に応じてメッセージの表示／非表示を切り替えるために（例えばエラー時にメッセージ表示するなど）、ng-messages／ng-message属性を使用する方法を解説する。
- 対象：AngularJS 1.3以降
ng-messages／ng-message属性は、条件式の値に応じてメッセージの表示／非表示を切り替えるためのディレクティブです。ng-switch、また、ng-show／ng-hideなどのディレクティブにも似ていますが、メッセージの表示に特化しているため、その用途ではよりシンプルにコードを表現できます。
主に、以下のようなエラーメッセージの表示などで利用します。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
<body ng-controller="MyController">
<form name="myForm" novalidate>
<div>
<label for="age">年齢：</label><br />
<input id="age" name="age" type="number" ng-model="user.age"
required min="20" max="60" />
<!--3エラー状況によってメッセージを表示-->
<span ng-messages="myForm.age.$error" ng-messages-multiple>
<span ng-message="required">入力は必須です。</span>
<span ng-message="min, max">
入力値が小さすぎるか、大きすぎます。</span>
<span ng-message="number">数値で入力してください。</span>
</span>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<!--1ngMessagesモジュールのインポート-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.min.js"></script>
<script>
// 2ngMessagesモジュールへの依存関係を宣言
angular.module('myApp', [ 'ngMessages' ])
.controller('MyController', ['$scope', function($scope) {
}]);
</script>
</body>
</html>
|
ng-messages／ng-message属性は、ngMessagesモジュールに属するディレクティブです。利用に当たっては、angular-messages.min.jsをインポートした上で（1）、ngMessagesモジュールへの依存関係を宣言してください（2）。
あとは、以下のように親子構造になるように、ng-messages／ng-message属性を指定します（3）。
［構文］ng-messages／ng-message属性
|
<element ng-messages="exp" ng-message-multiple>
<element ng-message="prop1">msg1</element>
<element ng-message="prop2, prop3, ……">msg2</element>
</element>
|
- element： 任意の要素
- exp： 条件を表すオブジェクト
- prop1、prop2、prop3、……： キー名*1
- *1 ただし、1つの
ng-message属性で複数のキーを渡せるのは、AngularJS 1.4以降です。
ng-messages属性で「キー名: 表示の是非」形式のハッシュを、配下のng-message属性でキー名を、それぞれ指定するわけです。フォーム名.要素名.$errorプロパティは、「検証名: エラーの有無」のハッシュを表すはずなので*1、ng-message属性でrequired、min、maxのような検証名を指定することで、検証エラーのあったものだけメッセージ表示できるというわけです。
- *1 入力値検証については、別稿「TIPS：入力フォームに検証機能を実装するには？」を参照してください。
ng-messages-multiple属性は、条件に合ったメッセージを複数全て表示することを意味します。ng-messages-multiple属性を省略した場合には、最初に条件に合致したメッセージを1つだけ表示します。
また、コンテナーとなる要素がない場合には、ng-messages／ng-messageを要素として表すこともできます。つまり、サンプルは以下のように書き換えても、ほぼ同じ意味です。
|
<ng-messages for="myForm.age.$error" multiple>
<ng-message when="required">入力は必須です。</ng-message>
<ng-message when="min, max">
入力値が小さすぎるか、大きすぎます。</ng-message>
<ng-message when="number">数値で入力してください。</ng-message>
</ng-messages>
|
処理対象：ディレクティブ（Directive） カテゴリ：基本
API：ngMessages（ng-messages）｜ngMessage（ng-message） カテゴリ：ngMessages > directive（ディレクティブ）
※以下では、本稿の前後を合わせて5回分（第13回～第17回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
13. URL／メールアドレスからハイパーリンクを生成するには？（linky）
URL／メールアドレスの文字列データをアンカータグによるリンクに整形できるlinkyフィルターの基本的な使い方を説明する。
15. 【現在、表示中】≫ 式の真偽に応じて表示を切り替えるには？（ng-messages／ng-message）
条件式の値に応じてメッセージの表示／非表示を切り替えるために（例えばエラー時にメッセージ表示するなど）、ng-messages／ng-message属性を使用する方法を解説する。
16. 別ファイルやJavaScriptでメッセージを管理するには？（ng-message-include／ng-message-exp）
ng-messages属性で使用するメッセージを、ページ内でテンプレート化したり、外部ファイル化したりして効率的に管理する方法を説明する。
17. 入力値のモデルへの反映タイミングを変更するには？（ng-model-options）
AngularJSのデータバインディング機能により入力値がモデルに反映されるのを、指定したミリ秒数後やフォーカスが外れたときまで遅延させる方法を説明する。
