How to Bind to a List of Checkbox Values in AngularJS?

Introduction

When dealing with a set of checkboxes, it can be crucial to bind their values to a list in the controller for effective management.但是，AngularJS的NG模型屬性似乎僅限於綁定單個複選框值。本文探討了解決此問題的兩種方法，利用簡單的數組或一系列對像作為輸入數據。

controller： app.controller（'simplearrayctrl'，['$ scope'，function simplearrayctrl（$ scope）{ //水果 $ scope.fruits = ['蘋果'，'橙色'，'梨'，'naartjie']; //選定的水果 $ scope.selection = ['蘋果'，'pear']; //切換選擇 $ scope.toggleselection =函數toggleselection（frualname）{ var idx = $ scope.selection.indexof（fruitname）; 如果（IDX> -1）{ $ scope.Selection.splice（IDX，1）; } 別的 { $ scope.selection.push（fruitname）; } }; }]）; pros：

operations 方法2：object array

   {{fruitName}}

; //選定的水果 $ scope.Selection = []; //適用於選定水果的助手 $ scope.selectedFruits =函數selectedfruits（）{ 返回filterFilter（$ scope.fruits，{selected：true}）; }; //觀看水果以進行更改 $scope。 $ WATCH（'Fruits | filter：{selected：true}'，function（nv）{ $ scope.Selection = nv.map（function（frual）{ 返回水果。名稱； }）; }， 真的）; }]）; pros：

app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {

  // Fruits
  $scope.fruits = ['apple', 'orange', 'pear', 'naartjie'];

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

  // Toggle selection
  $scope.toggleSelection = function toggleSelection(fruitName) {
    var idx = $scope.selection.indexOf(fruitName);

    if (idx > -1) {
      $scope.selection.splice(idx, 1);
    } else {
      $scope.selection.push(fruitName);
    }
  };
}]);