Expression

{{ 式 }} の中に式(expression)を使う例です。

次のリンクをクリックすると "ngp_big.html" が呼び出されます。
Expression

プログラムの説明

  1. AngularJS サンプルプログラム "ngp_big.html" です。
    <!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><input type="text" ng-model="x"></div>
     <div><input type="text" ng-model="y"></div>
     <div>{{x}} vs {{y}} : {{( x > y ) ? x : y}} is big.</div>
    
    </body>
    </html>
    
  2. html で AngularJS を使用することを宣言します。
    head 内で "angular.min.js" を組み込みます。
    <html ng-app>
    
  3. 一般に {{ name }} の中には AngularJS で定義された名前を使うのですが、JavaScript の式(expression)を書くことも出来ます。
    タイプ入力された x と y を比べて、どちらが大きいかを表示してみました。
     <div>{{x}} vs {{y}} : {{( x > y ) ? x : y}} is big.</div>
    
  4. 同じ桁数なら正しく判定されるのですが、3 と 12 をタイプしてみて下さい。
    3 が大きいと判定されます。
    これは文字列として比較されるからです。
  5. 数値として比較するときは、次のように書きます。
     <div>{{x}} vs {{y}} : {{((x-y)>0) ? x : y}} is big.</div>
    

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