AngularJSを使用してチェックボックスの値をバインドする方法


  1. 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>
  1. AngularJSアプリケーションを作成します。以下のコードを使用して、myAppという名前のアプリケーションとmyControllerという名前のコントローラを作成します。
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
  $scope.checkboxValues = [false, false, false]; // チェックボックスの初期値
});
  1. チェックボックスの値を使用するために、checkboxValues配列をコントローラ内に作成しました。この配列は、各チェックボックスの状態(チェックされているかどうか)を保持します。

以上で、チェックボックスの値をバインドするためのAngularJSの設定が完了しました。これにより、チェックボックスの状態がcheckboxValues配列にバインドされます。

追加のコード例として、以下はcheckboxValues配列の内容を表示する方法です。

<div ng-repeat="value in checkboxValues">
  {{ value }}
</div>

これにより、チェックボックスの状態が表示されます。