Bagaimana untuk Mengikat Berbilang Nilai Kotak Semak ke Senarai dalam AngularJS?

Bagaimana untuk Mengikat kepada Senarai Nilai Kotak Semak dalam AngularJS?

Pengenalan

Apabila berurusan dengan satu set kotak pilihan , adalah penting untuk mengikat nilai mereka pada senarai dalam pengawal untuk pengurusan yang berkesan. Walau bagaimanapun, sifat ng-model AngularJS nampaknya terhad kepada mengikat satu nilai kotak semak. Artikel ini meneroka dua pendekatan untuk menyelesaikan isu ini, memanfaatkan sama ada tatasusunan ringkas atau tatasusunan objek sebagai data input.

Pendekatan 1: Tatasusunan Mudah

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>

Pengawal:

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);
    }
  };
}]);

Kebaikan:

• Data ringkas struktur
• Togol mudah mengikut nama

Keburukan:

• Operasi tambah/buang yang menyusahkan

Pendekatan 2: Tatasusunan Objek

HTML:

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

Pengawal:

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

  // Fruits
  $scope.fruits = [
    { name: 'apple',    selected: true },
    { name: 'orange',   selected: false },
    { name: 'pear',     selected: true },
    { name: 'naartjie', selected: false }
  ];

  // Selected fruits
  $scope.selection = [];

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

  // Watch fruits for changes
  $scope.$watch('fruits|filter:{selected:true}', function (nv) {
    $scope.selection = nv.map(function (fruit) {
      return fruit.name;
    });
  }, true);
}]);

Kebaikan:

• Operasi tambah/buang yang mudah

Keburukan:

• Struktur data yang lebih kompleks
• Togol mengikut nama yang menyusahkan

Demo: http://jsbin.com/ImAqUC/1/

Atas ialah kandungan terperinci Bagaimana untuk Mengikat Berbilang Nilai Kotak Semak ke Senarai dalam AngularJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!