連載
» 2015年11月06日 05時00分 公開

MEANスタックで始めるWebアプリ開発入門(7):AngularJSの理解で欠かせないコントローラーとas記法、データバインディングの基本的な使い方 (2/2)

[中村修太,クラスメソッド]
前のページへ 1|2       

AngularJSの特徴の一つ「データバインディング」のさまざまな行い方

データバインディングのためのディレクティブ「ng-model」

 以前、AngularJSの特徴の一つとして、ビューとモデルが双方向にひも付いたデータバインディング機能があることを説明しました。この機能のため、ビューの変更がモデルに変更され、モデルの変更はビューに反映されます。

 簡単なデータバインディングのサンプルを見てみましょう。

・
・
  <div>
      <label id="userName" for="userName">input name:</label>
      <input type="text" name="userName"
             ng-model="name">
      <div>Hello、{{name}}!</div>
  </div>
・
・

 ここでは、テキストフィールドにng-modelを使用してデータバインディングしています。上記サンプルを実行すると、図のように入力フィールドと表示が同期します。

データバインディングの例

 ng-modelはinputタグやselectタグなどのモデルとビューをひも付けます。また、検証(Validate)機能も持っており、他のディレクティブ(ng-requiredなど)と組み合わせることで、入力チェックをさせることも可能です。

Angular 1.3から追加された「ng-model-options」

 Angular 1.3から追加されたng-model-optionsを使用すれば、モデル更新のタイミングを管理することができます。

 先ほどのサンプルを少し変更してみましょう。ここでは、テキストフィールドからフォーカスが外れるか、入力されてから1秒後に表示を反映させます。

・
・
  <div>
      <label id="userName" for="userName">input name:</label>
      <input type="text" name="userName"
             ng-model="name"
             ng-model-options="{ 
                updateOn: 'default blur', 
                debounce: {'default': 1000, 'blur': 0} }">
      <div>Hello、{{name}}!</div>
  </div>
・
・

 ng-model-optionsディレクティブで使用しているupdateOn属性は、テキストフィールドやセレクトボックスいった、UIに対するどのイベントでモデルを更新するか指定可能です。上記例では、blurイベント(フォーカスが外れたとき)が発生するまで、テキストフィールドで入力値を変更してもモデル(表示)に反映されないように設定しています。

 debounce属性は、モデル更新までの待ち時間をミリ秒単位で指定できます。上記例では、入力値変更から1秒後にモデルが更新されます。

エクスプレッション構文とは異なる「ng-bind」

 今までの例ではエクスプレッション構文を使っていましたが、ng-bindディレクティブを使用してモデルの値を使うことができます。

・
・
      <div ng-bind="'Hello、' + name + '!'"></div>
・
・

 エクスプレッション構文とは違い、ng-bindはタグの属性なので、画面表示時にエクスプレッションの記述({{……}})が表示されてしまうのを回避できます(※ng-cloakディレクティブを使用しても、処理前のエクスプレッション表示を回避可能です)。

AngularJS 1.3のワンタイムバインディング

 双方向データバインディングは便利ですが、値が変更されないデータでもバインドされ、変更を監視されることでパフォーマンスが悪くなることがあります。そういったケースに対応するため、AngularJS 1.3では「One-time Binding(ワンタイムバインディング)」という機能が追加されました。

 これはバインディングを1回だけしか行わないようにする機能で、初回(undefined状態)のみ変更を監視され、一度値が設定されたら(もしくはnullになったら)監視対象から除外されます。

 使用するのは簡単で、プロパティの前に「::」を付けるだけです。

<!-- エクスプレッション構文の場合 -->
{{::userName}}
<!-- 属性の場合 -->
<div ng-bind="::userName">

 サンプルのバインディング部分を上記コードに置き換えると、初回の入力のみ値が反映されることが確認できます。

次回は、AngularJSのビルトインディレクティブについて

 今回は、AngularJSのコントローラーやデータバインディングについて解説しました。次回は、ビルトインディレクティブについて紹介する予定です。

著者紹介

中村修太(なかむら しゅうた)

中村修太

クラスメソッド勤務の新しもの好きプログラマーです。数年前に東京から山口県に引っ越し、現在もリモート勤務しています。最近の趣味は空手とぬか漬け作り。


前のページへ 1|2       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。