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 }">

次のリンクをクリックすると "ngp_back_blue.html" が呼び出されます。
"Hello" をタイプすると、背景色が青色になります。
Background_Blue のプログラム

プログラムの説明

  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)