Data Bind

input のタイプ入力と div の表示を Bind します。
タイプ入力と同時に div にメッセージが反映します。

次のリンクをクリックすると "ngp_bind.html" が呼び出されます。
Data Bind のプログラム

プログラムの説明

  1. AngularJS サンプルプログラム "ngp_bind.html" です。
    <!DOCTYPE html>
    <html ng-app>
    <head>
    <meta charset="UTF-8" />
    <title>AngularJS TIPS</title>
    </head>
    
    <body>
    <form>
      <label for="name">名前:</label>
      <input id="name" name="name" type="text" ng-model="name" />
      <div>{{"こんにちは、" + name + "さん!"}}</div>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    </body>
    </html>
    
  2. html で AngularJS を使用することを宣言します。
    <html ng-app>
    
  3. input の ng-model で "name" を宣言します。
    宣言した "name" を div で参照します。
    form の input からタイプした文字が、1文字タイプする毎に直ちに div に反映します。
      <label for="name">名前:</label>
      <input id="name" name="name" type="text" ng-model="name" />
      <div>{{"こんにちは、" + name + "さん!"}}</div>
    

div を使う

  1. form に代えて div を使ってみます。
    <!doctype html>
    <html ng-app>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
    </head>
    
    <body>
     <div>
      <p><input type="text" ng-model="yourName"></p>
      <p>Hello {{yourName}}!</p>
     </div>
    </body>
    </html>
    
  2. form でも div でも同じ要領です。
    *.js(JavaScript のソースファイル)は head 内で組み込む例を良く見かけます。
  3. input の ng-model で "yourName" を宣言します。
    宣言された "yourName" を {{yourName}} で参照します。
      <p><input type="text" ng-model="yourName"></p>
      <p>Hello {{yourName}}!</p>
    

一瞬の表示を改善

ページを起動した最初のタイミングで、{{...}}というエクスプレッション(=式)が一瞬表示されるのを修正します。

ng-bind

div に ng-bind を使うことで、明示的にバインドすることを宣言すると {{...}} が表示されるのを防ぐことができます。
  <div ng-bind="'こんにちは、' + name + 'さん!'"></div>

ng-cloak

div に ng-cloak 属性を利用することで、処理前の {{...}} が表示されるのを防ぐことができます。
ng-cloak を使うときは <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> を head で組み込んで下さい。
  <div ng-cloak>{{"こんにちは、" + name + "さん!"}}</div>

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)