The sky is the limit

ハイブリッドアプリ開発、人工知能(機械学習など)に関する備忘録 たまに宇宙のことも語る【AngularJS、Monaca、Cordova、OnsenUI】

1-2.【AngularJS】データモデルをビューへ表示する② - 【連載】AngularJSの基本操作

【連載】AngularJSの基本操作

f:id:duo-taro100:20160218004611p:plain

1-2.【AngularJS】データモデルをビューへ表示する②

 

 

前回の記事では、用意したデータモデルをビューへ表示させる方法をまとめた。

it-innovation.hatenablog.com

 

今回は、inputなどへ入力した値をビューに反映する方法についてまとめていく。

この方法ではjavascriptファイルは使用しないので、htmlのみの編集。

 

<!DOCTYPE html>

<html ng-app>

<head>

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>

</head>

<body>

 <div>

  <input type="text" ng-model="greet">

  <p>{{greet}}</p>

 </div>

</body>

</html>

 前回と大きく異なる点は「モジュールとコントローラ指定の有無」

今回に限って言えば、自分で定義したモジュールやコントローラを使用していないので、ここで指定する必要はない。(jsファイルを読み込んでないので、指定すると正常に動作しない)

実際にアプリを作成する場合にはありえないけど。

f:id:duo-taro100:20160322234907p:plain

上記のファイルをブラウザで確認すると、入力フォームに入力した値がそのまま画面上に表示されるのがわかると思う。

以上で、データをビューに表示させる方法についてのまとめは終了。

 

次回以降はディレクティブ(ループ文やif文など)の扱い方をまとめていく。

f:id:duo-taro100:20160218005810j:plain

 

以上。