Background_Color

メッセージをタイプすると背景色が変わります。

次のリンクをクリックすると "ngp_back_color.html" が呼び出されます。
文字をタイプすると、背景色が赤色になります。
Background_Color のプログラム

プログラムの説明

  1. AngularJS サンプルプログラム "ngp_back_color.html" です。
    <!doctype html>
    <html ng-app>
    <head>
      <meta charset="utf-8">
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
    </head>
    
    <style>
      .notEmpty { background-color: red; }
    </style>
    <body ng-class="{ notEmpty : myModel }">
      Hello <span ng-bind="myModel"></span> !!!
      <div><input type="text" ng-model="myModel"></div>
    
    </body>
    </html>
    
  2. html で AngularJS を使用することを宣言します。
    head 内で "angular.min.js" を組み込みます。
    <html ng-app>
    
  3. style で .notEmpty のとき、背景色を赤に設定します。
    'notEmpty' は ng-class で設定した class 名です。
    <style>
      .notEmpty { background-color: red; }
    </style>
    
  4. body で ng_class を設定します。
    'notEmpty' が class 名で、myModel(空で無くなった時)がその条件です。
    <body ng-class="{ notEmpty : myModel }">
    

プログラムの説明

  1. "Hello" がタイプされたときに、背景色を青に設定してみましょう。
    style と body を次のように書き換えて下さい。
    <style>
      .className { background-color: blue; }
    </style>
    <body ng-class="{ className : myModel==='Hello' }">
      Hello <span ng-bind="myModel"></span> !!!
      <div><input type="text" ng-model="myModel"></div>
    </body>
    
  2. プログラムを起動して "Hello" とタイプすると、背景色が青に設定されます。
    'className' が class 名で、myModel==='Hello' がその条件です。
    JavaScript の等しいの記号は '===' を使います。
    <body ng-class="{ className : myModel==='Hello' }">
    

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