AngularJS でチェックボックスの値をリストに効果的にバインドするにはどうすればよいですか?

AngularJS を使用したチェックボックス値のリストへのバインド

チェックボックス値を AngularJS コントローラーのリストにバインドするには、次の 2 つの異なるアプローチを利用できます。

単純な配列の使用

このアプローチでは、HTMLマークアップは次のようになります:

<label ng-repeat="fruitName in fruits">
  <input
    type="checkbox"
    name="selectedFruits[]"
    value="{{fruitName}}"
    ng-checked="selection.indexOf(fruitName) > -1"
    ng-click="toggleSelection(fruitName)"
  > {{fruitName}}
</label>

対応するコントローラー コードはバインディングを処理します:

app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {
  // Fruits: ['apple', 'orange', 'pear', 'naartjie']
  $scope.fruits = ...;

  // Selected fruits: ['apple', 'pear']
  $scope.selection = ...;

  // Toggle selection by fruit name
  $scope.toggleSelection = function toggleSelection(fruitName) {
    // ... code to manage selection ...
  };
}]);

長所:

• 単純なデータ構造
• フルーツごとに簡単に切り替えname

短所:

• 複数のリストの管理による煩雑な追加/削除操作

オブジェクトの使用Array

または、次の配列を使用することもできます。入力データのオブジェクト:

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

コントローラーのロジックは次のとおりです:

app.controller('ObjectArrayCtrl', ['$scope', 'filterFilter', function ObjectArrayCtrl($scope, filterFilter) {
  // Fruits: [{ name: 'apple', selected: true }, ...]
  $scope.fruits = ...;

  // Selected fruits: [/* fruit names */]
  $scope.selection = ...;

  // Helper method to filter selected fruits
  $scope.selectedFruits = function selectedFruits() {
    return filterFilter($scope.fruits, { selected: true });
  };

  // Watch `fruits` for changes
  $scope.$watch('fruits|filter:{selected:true}', function (nv) {
    // ... code to update `$scope.selection` ...
  }, true);
}]);

長所:

• 追加の容易化/取り除く操作

短所:

• より複雑なデータ構造
• 名前による切り替えが面倒 (ヘルパーが必要)メソッド)

比較

各ソリューションには長所と短所があるため、最適なアプローチの選択はアプリケーションの特定の要件によって異なります。

以上がAngularJS でチェックボックスの値をリストに効果的にバインドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。