【保存版】AngularJSでチェックボックスを自在に操る：リストへのバインドから応用例まで

2024-05-16

AngularJSでチェックボックスの値のリストにバインドする方法

ng-model ディレクティブを使用する

HTML

<input type="checkbox" ng-model="selectedFruits" value="apple"> りんご
<input type="checkbox" ng-model="selectedFruits" value="orange"> オレンジ
<input type="checkbox" ng-model="selectedFruits" value="banana"> バナナ

JavaScript

$scope.selectedFruits = [];

この例では、selectedFruitsという配列をコントローラで定義し、ng-modelディレクティブを使用して、チェックボックスの値をこの配列にバインドしています。ユーザーがチェックボックスをオンにすると、その値がselectedFruits配列に追加され、オフにすると配列から削除されます。

<input type="checkbox" ng-checked="selectedFruits.includes('apple')" value="apple"> りんご
<input type="checkbox" ng-checked="selectedFruits.includes('orange')" value="orange"> オレンジ
<input type="checkbox" ng-checked="selectedFruits.includes('banana')" value="banana"> バナナ

$scope.selectedFruits = ['apple'];

この例では、ng-checkedディレクティブを使用して、チェックボックスの選択状態をselectedFruits配列に基づいて制御しています。チェックボックスの値がselectedFruits配列に含まれている場合、チェックボックスはオンになり、含まれていない場合はオフになります。

**ng-model`ディレクティブを使用する場合は、チェックボックスの値をプログラムで操作する必要がある場合に適しています。

補足

上記の例では、チェックボックスの値を文字列として扱っていますが、数値やオブジェクトなど、他のデータ型も使用できます。
チェックボックスの値を複数の配列にバインドすることもできます。
チェックボックスの値が変更されたときにイベントを発生させるには、ng-changeディレクティブを使用できます。

その他のリソース

<!DOCTYPE html>
<html ng-app="app">
<head>
  <title>AngularJS Checkbox Binding Example</title>
  <script src="https://angularjs.org/" type="text/javascript"></script>
</head>
<body>
  <div ng-controller="MyController">
    <h2>好きな果物を選んでください</h2>
    <input type="checkbox" ng-model="selectedFruits" value="apple"> りんご
    <input type="checkbox" ng-model="selectedFruits" value="orange"> オレンジ
    <input type="checkbox" ng-model="selectedFruits" value="banana"> バナナ
    <br>
    <p>選択された果物: {{ selectedFruits }}</p>
  </div>

  <script>
    var app = angular.module('app', []);

    app.controller('MyController', function($scope) {
      $scope.selectedFruits = [];
    });
  </script>
</body>
</html>

// 上記の HTML コード内に記述

説明

このコードは、以下の機能を提供します。

3つのチェックボックス: りんご、オレンジ、バナナ
selectedFruitsという配列: ユーザーが選択した果物の値を保持
ng-modelディレクティブ: チェックボックスの値をselectedFruits配列にバインド
{{ selectedFruits }} ディレクティブ: 選択された果物のリストを表示

動作

ユーザーがチェックボックスをオンにすると、その値がselectedFruits配列に追加され、{{ selectedFruits }} ディレクティブによって画面に表示されます。ユーザーがチェックボックスをオフにすると、その値がselectedFruits配列から削除され、画面から消えます。

このサンプルコードをどのように拡張できますか？

このサンプルコードを拡張して、以下の機能を追加できます。

チェックボックスのグループ: 複数のチェックボックスをグループ化し、同時に選択できる数を制限
カスタムフィルター: 選択された果物のみを表示するフィルターを実装
データの保存: selectedFruits配列をローカルストレージまたはデータベースに保存

これらの機能を追加することで、より複雑で実用的なアプリケーションを作成することができます。

AngularJSでチェックボックスの値のリストにバインドするその他の方法

<div ng-repeat="fruit in fruits">
  <input type="checkbox" ng-model="fruit.selected" value="{{ fruit.name }}"> {{ fruit.name }}
</div>

$scope.fruits = [
  { name: 'apple', selected: false },
  { name: 'orange', selected: true },
  { name: 'banana', selected: false }
];

この例では、ng-repeatディレクティブを使用して、fruits配列内の各果物に対してチェックボックスを作成しています。ng-modelディレクティブを使用して、チェックボックスの値をfruit.selectedプロパティにバインドしています。

<checkbox-list fruits="fruits"></checkbox-list>

app.directive('checkboxList', function() {
  return {
    restrict: 'E',
    scope: {
      fruits: '='
    },
    template: '<div ng-repeat="fruit in fruits">' +
               '<input type="checkbox" ng-model="fruit.selected" value="{{ fruit.name }}"> {{ fruit.name }}' +
               '</div>'
  };
});

この例では、checkbox-listというカスタムディレクティブを作成しています。このディレクティブは、fruitsというプロパティを受け取り、そのプロパティに基づいてチェックボックスのリストを作成します。

jQueryを使用する

<input type="checkbox" id="appleCheckbox" value="apple"> りんご
<input type="checkbox" id="orangeCheckbox" value="orange"> オレンジ
<input type="checkbox" id="bananaCheckbox" value="banana"> バナナ

$(document).ready(function() {
  var selectedFruits = [];

  $('#appleCheckbox').change(function() {
    if ($(this).is(':checked')) {
      selectedFruits.push('apple');
    } else {
      selectedFruits.splice(selectedFruits.indexOf('apple'), 1);
    }
  });

  $('#orangeCheckbox').change(function() {
    if ($(this).is(':checked')) {
      selectedFruits.push('orange');
    } else {
      selectedFruits.splice(selectedFruits.indexOf('orange'), 1);
    }
  });

  $('#bananaCheckbox').change(function() {
    if ($(this).is(':checked')) {
      selectedFruits.push('banana');
    } else {
      selectedFruits.splice(selectedFruits.indexOf('banana'), 1);
    }
  });

  console.log(selectedFruits);
});