JavascriptフレームワークのGoogleのAngularJSを使っている。
他のフレームワークと違い、直接DOMを操作するようなタイプではなく、モデルとビュー間データバインディングで動的なWebアプリを作成できる。
そこでチェックボックとモデルをバインディングして、初期値を設定する方法が分からなかったので調べてみた。
コントローラー内で以下のようなデータを初期化して、テンプレートに表示する。
checkboxの状態はchekedで表す。
function listCtrl($scope) {
$scope.data = [
{"date": "2013/12/31","no": "1","checked":"YES"},
{"date": "2013/12/31","no": "2","checked":"NO"}
];
}
サンプルにあるような感じでモデルにバインディングしても、初期値に反映されない。
<input type="checkbox" ng-model="journal.checked">
オプションを追加することで初期値に反映される。
<input ng-false-value="NO" ng-model="journal.checked" ng-true-value="YES" type="checkbox" />
trueとfalseの値を指定するとモデルの内容がそのまま初期値として設定される。