AngularJSエクスプレッションの詳細とサンプルコード

前回はAngularJSの基本的な使い方について学びました。ここではPDFと一緒に表現式の関連内容を学びましょう。

　　AngularJSの表現式はJavaScriptのものとは全く同じではありません。

　　まず、その表現式は{{}}内に置かれる必要があります。次に、JavaScriptの表現式概念に比べて以下の点が異なります：

　　1 作用域が異なる

　　JavaScriptではデフォルトでwindowが使用されますが、AngularJSでは異なります。$scopeを使用して作用域を制御します。

　　2 未定義の値を許可

　　AngularJSでは、未定義の表現式を使用してもエラーは発生しません。直接空値を返します。

　　3 フィルタ

　　表現式で|パイプラインコマンドを使用してフィルタを追加することができます。UNIXのコマンドラインに似ています。　

　　4 $記号

　　Angularのメソッドとユーザー定義のメソッドを区別するために使用されます。

　　以下に小さなコードを見てみましょう：

!doctype html
<html ng-app>
  <head>
     <meta http-equiv-equiv="Content-Type-Type" content="text/html/html; charset=utf-8-8" />
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="ctl">
      name:<input ng-model="name" type="text">
      <button ng-click="reset()">reset</button>
      <br>
      {{name}}
      <br>
      hello ! {{test}}
      <br>
      filter : {{name | uppercase}}
    </div>
    <script type="text/javascript">
      function ctl($scope){
        var str = "init";
        $scope.name = str;
        $scope.reset = function(){
          $scope.name = str;
        }
      }
    </script>
  </body>
</html>

　　reset をトリガーして reset メソッドを呼び出し、name 変数の内容をリセットします；

　　表現式中で未定義の test が参照されていますが、エラーは発生せずにデフォルトで空が表示されます。—— {{test}}

　　最後にフィルタを使用して、表現式の name の値を大文字に変換します。—— {{name | uppercase}}

　　実行結果：

　　　　以上が AngularJS 表現式の資料整理です。今後も関連資料を追加していく予定です。皆様のご支援を感謝します。

基礎教程