1.6.4AngularJSのコントローラにメソッドを定めると、データが動的に処理できます。本稿では、入力フィールドに書いたテキストを、項目としてHTMLドキュメントに加えてみます。動的にリストをつくる」で複数の初期値をHTMLドキュメントに加えるサンプルとして書いたコード001です。複数のチェックボックスとその右に示されるテキストがコントローラに定めた配列から与えられています(図001)。データバインディングにより、入力フィールドに書いたテキストがチェックボックスの右に表示され、チェックするとテキストに取り消し線が引かれます。コントローラに項目追加のメソッドを定めるAngularJSのcontroller()メソッドによりコントローラ(TodoListController)が定められたJavaScriptコードに項目追加のメソッドを書き加えましょう。つぎのように、controller()メソッドの第2引数のコンストラクタ関数本体の中で、this参照にメソッド(addTodo())を定義します。入力フィールドの<input>要素には、次項でng-modelディレクティブに新たなプロパティ(todoText)を与えます。このプロパティで入力フィールドに値があることをif文により確かめて、項目の配列(todos)にオブジェクトをつくって加えたうえで、入力フィールドは空にしました。フォームに送信ボタンとコントローラのメソッド呼び出しのディレクティブを加える<form>要素には、まず送信ボタンの<input>要素を加えます(ボタンのスタイルはBootstrapのクラスで与えました)。つぎに、送信ボタンを押したときの処理は、<form>要素にng-submitディレクティブで定めます。値として文字列で記述したJavaScriptコードが実行されます。value="追加"></form>これで、フォームの送信ボタンを押すと、コントローラ(TodoListController)に定めたメソッド(addTodo())が呼び出されます。すると、入力フィールドに書いたテキストがチェックボックスとともに項目として加わります(図002)。HTMLドキュメントの<script>要素と<body>要素の中身は、以下のコード001にまとめました。JavaScriptの関数におけるthis参照先はわかりにくいため、ローカル変数(todoList)に納めるように書き替えました。サンプル001としてファイルをフレームに掲げます。