1.6.4AngularJSのコントローラで管理している項目のデータを調べて、条件にしたがって削除してみます。要素のマウスクリックでコードを実行するディレクティブも、併せてご紹介しましょう。項目を数えて表示する」でコントローラが管理する項目の数を調べるサンプルとして書いたコード001です。項目の追加やチェックボックスのオン・オフによって、数の表示が変わります(図001)。データバインディングされたクラスにより、チェックボックスをチェックしたテキストは色が変わり、取り消し線も引かれます。チェックされた項目を削除するメソッドの定義チェックされた項目は削除するメソッド(archive())を、コントローラに加えます。項目を数えて表示する」03「チェックのついていない残り項目数を調べて表示に加える」参照)。チェックのついた項目を要素のクリックで削除する<body>要素にはつぎのように<a>要素を加え、クリックしたら項目削除の新しいメソッド(remaining())を呼び出します。要素のクリックでコードを実行するのが、ng-clickディレクティブです。つぎのように、実行したいコードを文字列で値として定めます。<a>要素をクリックすると、チェックボックスにチェックされた項目は除かれます(図002)。件数も動的に改められます。]</div>図002■チェックをつけた項目は削除されるサンプル001■チェックのついた項目数を削除するなお、この機会に項目のチェックがしやすいように、項目のinputとspan要素をlabel要素に含めました。すると、項目のテキストをクリックしても、チェックボックスが切り替わります。class="done-{{todo.done}}">{{todo.text}}</span></label>HTMLドキュメントの<script>要素と<body>要素の中身は、以下のコード001にまとめました。ここで、angular.module()関数の戻り値を変数に入れるのはやめました。つぎのように、「.」(ドット)を続けてcontroller()メソッドが呼び出せるからです。すると、グローバル変数が残るのを避けられます。サンプル001としてファイルをフレームに掲げます。