1-2.【AngularJS】データモデルをビューへ表示する② - 【連載】AngularJSの基本操作
【連載】AngularJSの基本操作
1-2.【AngularJS】データモデルをビューへ表示する②
前回の記事では、用意したデータモデルをビューへ表示させる方法をまとめた。
今回は、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ファイルを読み込んでないので、指定すると正常に動作しない）
実際にアプリを作成する場合にはありえないけど。
上記のファイルをブラウザで確認すると、入力フォームに入力した値がそのまま画面上に表示されるのがわかると思う。
以上で、データをビューに表示させる方法についてのまとめは終了。
次回以降はディレクティブ（ループ文やif文など）の扱い方をまとめていく。
以上。
