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” />
デモとコードサンプルはこちら。