「AngularJS入門」ngModel ディレクティブのサンプル
環境
Angularjs 1.6.9
書式
<input ng-model="xxx"
ngModelは、Angularに相互のデータバインディングを行うように伝えるディレクティブです。
input、textarea、selectのような他のディレクティブのモデルとビューを紐付けます。
input、select、textarea、また、NgModelControllerを使用し、 このディレクティブによって公開されたフォームのカスタム入力要素でも動作します。
使用例
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>名前を入力してください</p>
<p>名前: <input type="text" ng-model="name" placeholder="山田"></p>
<h1>{{name}}</h1>
</div>
</body>
</html>
結果
テキストボックスに「大原」と入力すると、「入力した名前:大原」が表示されます。