AngularJSを始める」参照)。このデータバインディングにより、要素の属性を動的に変えることもできます。そこで、要素のclass属性をインタラクティブに定めて、スタイルを切り替えてみましょう。入力フィールドにデータバインディングを定めたフォームAngularJSで<input>要素の入力フィールドに簡単なデータバインディングを定めたのが以下のコード001です。AngularJSを始める」のコード002と同じです。入力フィールドに書いたテキストが、チェックボックスの右に表示されます(図002)。データバインディングでクラス属性を動的に変えるAngularJSは、要素の属性値もデータバインディングできます。そこで、チェックボックスの<input>要素にng-modelディレクティブを加え、その右の<span>要素のclass属性値をつぎのようにデータバインディングします。ふたつのng-modelディレクティブに与えた名前は「オブジェクト.」のかたちで定めました。すると、それらをオブジェクト(todo)にまとめて、それぞれの値はそのプロパティ(doneとtext)で参照できます。Chromeの[デベロッパーツール]を開いて、チェックボックスをクリックしてみたのが下図002です。チェックボックスのオン・オフは、値trueとfalseとして得られます。その値がデータバインディングされて、<span>要素のclass属性の値が変わりました("done-true")。ng-modelディレクティブを加えた<input>要素には、AngularJSが動的に「ng-」で始まるclassを与えていることも見て取れるでしょう。データバインディングで定められたクラスのスタイルを加える<style>要素に、データバインディングで定められたクラスのスタイルを加えましょう。チェックボックスをオンにしたとき与えられるクラス(done-true)のスタイルをつぎのように定めます。text-decorationプロパティで取り消し線(line-through)を加え、テキストのカラーをグレーにしました。grey;}</style>これで、<input>要素のチェックボックスをオンにすると、右の<span>要素のテキストに取り消し線が引かれ、色はグレーになります(図003)。<style>要素のCSSの定めと<body>要素の中の記述を以下のコード002にまとめました。サンプル001としてファイルをフレームに掲げます。1.5.3のリリースにともない、本文とコードを更新。