入力されたものを即時に表示する

入力されたものを即時に表示する処理です。この機能を使うことによりブログの即時反映機能などを作ることができます。

<html ng-app>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
 
 <p><input type="text" ng-model="name"></p>
 <p>{{name}}</p>
</html>
	

上記コードをHTML形式で保存すれば、入力されたものを即時表示することができます。

入力されたものを即時表示するデモ

なにか入力してください

{{name}}

解説

重要なポイント

  • htmlタグに ng-app の追加
  • inputタグにng-model="name"の追加
  • {{name}}の追加

[ng-app]でAngularJSを有効化します。 [ng-model="name"]で入力された値が[name]に格納されます。 [{{name}}]で nameに入力された値を即時表示しています。