- HTMLフォームを作成します。チェックボックスの値をバインドするために、
ng-model
ディレクティブを使用します。例えば、以下のようなコードを使用します。
<div ng-app="myApp" ng-controller="myController">
<input type="checkbox" ng-model="checkboxValues[0]" /> Option 1
<input type="checkbox" ng-model="checkboxValues[1]" /> Option 2
<input type="checkbox" ng-model="checkboxValues[2]" /> Option 3
</div>
- AngularJSアプリケーションを作成します。以下のコードを使用して、
myApp
という名前のアプリケーションとmyController
という名前のコントローラを作成します。
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.checkboxValues = [false, false, false]; // チェックボックスの初期値
});
- チェックボックスの値を使用するために、
checkboxValues
配列をコントローラ内に作成しました。この配列は、各チェックボックスの状態(チェックされているかどうか)を保持します。
以上で、チェックボックスの値をバインドするためのAngularJSの設定が完了しました。これにより、チェックボックスの状態がcheckboxValues
配列にバインドされます。
追加のコード例として、以下はcheckboxValues
配列の内容を表示する方法です。
<div ng-repeat="value in checkboxValues">
{{ value }}
</div>
これにより、チェックボックスの状態が表示されます。