AngularJS:フィールド値の表示

goto_jp 585views 更新:2014年4月22日

サンプルはこちら。
http://jsdo.it/goto_jp/kMdM

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<body ng-app>
  <input type="text" ng-model="onamae" placeholder="おなまえ">
  <p>おなまえ:{{onamae}}</p>
  <hr>
  <input type="text" ng-model="num1" placeholder="0">
  ×
  <input type="text" ng-model="num2" placeholder="0">
  <p>計算:{{num1 * num2}}</p>
</body>

それぞれの input フィールドに「ng-model」というAngularJS用のプロパティを含めています。

「ng-model」はAngularJSの「ディレクティブ」というDOMをまとめる仕組みの一つなのですが、細かいことは割愛するとしましてそれぞれの「ng-model」の値と同様に「{{onamae}}」などがありますが、ここに値がリンクしています。

jQueryのようにイベント指定の記述など不要で上記のHTML記述だけでフィールド値のDOM側表示が行えます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません