Lower/Upperd

文字列を大文字/小文字に変換するフィルターを利用します。

次のリンクをクリックすると "ngp_lower_upper.html" が呼び出されます。
Lower/Upper

プログラムの説明

  1. AngularJS サンプルプログラム "ngp_lower_upper.html" です。
    <!doctype html>
    <html ng-app>
    <head>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    </head>
    
    <body>
    <div ng-init="name = 'Webデリ - Spicy Tools, Delicious Sites.'">
    <p>
      変換前:{{name}}
    </p>
    <p>
      小文字:{{name | lowercase}}
    </p>
    <p>
      大文字:{{name | uppercase}}
    </p>
    </div>
    
    </body>
    </html>
    
  2. html で AngularJS を使用することを宣言します。
    head 内で "angular.min.js" を組み込みます。
    <html ng-app>
    
  3. div の ng-init で テストに使う文字列を定義します。
    ng-init で 宣言した "name" を div で参照しています。
    <div ng-init="name = 'Webデリ - Spicy Tools, Delicious Sites.'">
    
  4. 「変換前と小文字と大文字」に変換した文字列を印字します。
    <p>
      変換前:{{name}}
    </p>
    <p>
      小文字:{{name | lowercase}}
    </p>
    <p>
      大文字:{{name | uppercase}}
    </p>
    

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