1.4.9AngularJSは、フォームに入力されたデータを、形式に応じたいくつかの条件で調べることができます。その結果に応じて要素に与えるクラスを変えてみましょう。本稿のサンプルでは、JavaScriptコードは書きません。フォームに入力されたデータを確かめる」で、データの形式に応じてメッセージを表示するサンプルとして書いたコード001に手を加えます。フォームの<input>要素の種類ごとに条件が与えられていて、それぞれを満たさないとフィールド下にメッセージが示されます(図001)。フォームに入力されたデータに応じてスタイルを変える」では、AngularJSが動的に決めるクラスにより要素のスタイルを変えました(図002)。ng-modelディレクティブが加えられた<input>要素のデータに応じて動的に与えられるクラスに、つぎのようなCSSを定めたのです。BootstrapなどのCSSフレームワークを使っている場合、CSSを書き加えるのではなく、すでに備わっているスタイルを使いたいこともあるでしょう。AngularJSは、要素に定めるクラスを動的に変えることもできます。AngularJSで動的にクラスを定めるAngularJSでクラスを定めるのは、ng-classディレクティブです。クラスがひとつのときは、HTMLのclass属性と同じく、クラスを文字列で定めます。クラスが複数のときは、配列に納めたうえで、クォーテーション(「'」か「"」)に括って(つまり文字列で)与えます。オブジェクトで渡すと、プロパティ名をクラスとみなし、値が論理値評価でtrueのとき適用されます。{クラスC:論理評価値}]">サンプルはBootstrapを用いています。そこで、<input>要素に正しく入力したときはhas-success、適切でないときにはhas-errorのスタイルを与えましょう(Bootstrap3日本語リファレンス「検証スタイル」の「基本フォームにおける検証スタイル」参照)。フィールドにフォーカスを当てるまでは、もとのままとします。その場合、ng-classディレクティブは、親の<div>要素にそれぞれつぎのように定めます。ng-classディレクティブにオブジェクトで与えたクラスのプロパティ値は、ふたつのプロパティ($invalidと$touched)の値を論理演算子(&&)で合わせました。placeholder="パスワード"></div></form></div>これで、フィールドに正しく入力するとhas-successの緑の外枠、適切でなければhas-errorの赤枠に加えてメッセージが示されます(図003)。以下のコード001に、<body>要素の記述をまとめます。以下のサンプル001にファイルをフレームで開きました(フレームのソースでコードが確かめられます)。