AngularJSのデータバインディングのディレクティブの概要についてまとめました。
デモとコードサンプルはこちら。
※目次をクリックすると目次の下部にコンテンツが表示されます。
1Wayデータバインディング
・1Wayデータバインディングの設定をすると、スクリプト内のデータモデルに設定した変数の値がHTML内の関連付けられた要素に即座に反映される。
・1Wayデータバインディングを利用するには、二重波括弧{{…}}を使用するか、ng-bind、ng-bind-templateディレクティブを使用する。
・{{…}}の方が簡単に記述できるので、通常はこちらを使用する。
ng-bindは一つのデータバインディングしか利用できないので、二つ以上ある場合はng-bind-templateディレクティブを使用する必要がある。
●使用例
下記のようにスクリプトで$scopeサービスを使って変数に値を設定すると、設定した値がHTMLの要素にバインディングされ、HTMLに値が表示される。
(スクリプト)
$scope.country = “日本”;
$scope.gender = “男性”;
(HTML)
私は{{country}}在住の{{gender}}です
<div>私は<span ng-bind=”country”></span>在住です。</div>
<div>ng-bind-template:私は{{country}}在住の{{gender}}です。</div>
※二重波括弧の文字を表示したい場合は?
AngularJSでは、二重波括弧は1Wayデータバインディングとして解釈されてしまうため、そのままでは文字として表示する事が出来ない。
表示する場合は、下記のようにng-non-bindableディレクティブを使う。
<div ng-non-bindable>二重波括弧{{…..}}を表示するには、ng-non-bindableを使用。</div>
・1Wayデータバインディングを利用するには、二重波括弧{{…}}を使用するか、ng-bind、ng-bind-templateディレクティブを使用する。
・{{…}}の方が簡単に記述できるので、通常はこちらを使用する。
ng-bindは一つのデータバインディングしか利用できないので、二つ以上ある場合はng-bind-templateディレクティブを使用する必要がある。
●使用例
下記のようにスクリプトで$scopeサービスを使って変数に値を設定すると、設定した値がHTMLの要素にバインディングされ、HTMLに値が表示される。
(スクリプト)
$scope.country = “日本”;
$scope.gender = “男性”;
(HTML)
私は{{country}}在住の{{gender}}です
<div>私は<span ng-bind=”country”></span>在住です。</div>
<div>ng-bind-template:私は{{country}}在住の{{gender}}です。</div>
※二重波括弧の文字を表示したい場合は?
AngularJSでは、二重波括弧は1Wayデータバインディングとして解釈されてしまうため、そのままでは文字として表示する事が出来ない。
表示する場合は、下記のようにng-non-bindableディレクティブを使う。
<div ng-non-bindable>二重波括弧{{…..}}を表示するには、ng-non-bindableを使用。</div>
2Wayデータバインディング
・1WayデータバインディングではスクリプトからHTMLの要素へ、という方向だが、2WayデータバインディングではHTMLの要素からスクリプトへ反映させ、双方向に同期させることも出来る。
この場合は、ng-modelディレクティブを使用する。ユーザーがデータを入力できるHTML要素と一緒に使用する必要があるので、input、texterea、select要素などの属性に指定して使用する。
●使用例
下記例では、nameを2Wayデータバインディングとして設定してあるので、ユーザーが入力した値が即座に上の行の「私の名前は・・」の部分に表示される。
(スクリプト)
$scope.name = “初期値”;
(HTML)
<div>私の名前は{{name}}です。</div>
名前:<input ng-model=”name” />
デモとコードサンプルはこちら。
この場合は、ng-modelディレクティブを使用する。ユーザーがデータを入力できるHTML要素と一緒に使用する必要があるので、input、texterea、select要素などの属性に指定して使用する。
●使用例
下記例では、nameを2Wayデータバインディングとして設定してあるので、ユーザーが入力した値が即座に上の行の「私の名前は・・」の部分に表示される。
(スクリプト)
$scope.name = “初期値”;
(HTML)
<div>私の名前は{{name}}です。</div>
名前:<input ng-model=”name” />
デモとコードサンプルはこちら。
AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchを使って内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ
AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchで内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ