AngularJSのデータバインディングのディレクティブの概要

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>

2Wayデータバインディング
・1WayデータバインディングではスクリプトからHTMLの要素へ、という方向だが、2WayデータバインディングではHTMLの要素からスクリプトへ反映させ、双方向に同期させることも出来る。
 この場合は、ng-modelディレクティブを使用する。ユーザーがデータを入力できるHTML要素と一緒に使用する必要があるので、input、texterea、select要素などの属性に指定して使用する。
 
●使用例
 
下記例では、nameを2Wayデータバインディングとして設定してあるので、ユーザーが入力した値が即座に上の行の「私の名前は・・」の部分に表示される。
 
(スクリプト)
$scope.name = “初期値”;
 
(HTML)
<div>私の名前は{{name}}です。</div>
名前:<input ng-model=”name” />
 
デモとコードサンプルはこちら

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください