Bagaimana untuk Mengikat Nilai Kotak Semak dengan Berkesan ke Senarai dalam AngularJS?

Mengikat pada Senarai Nilai Kotak Pilihan dengan AngularJS

Untuk mengikat nilai kotak pilihan pada senarai dalam pengawal AngularJS, anda boleh memanfaatkan dua pendekatan berbeza:

Menggunakan Tatasusunan Mudah

Dalam pendekatan ini, penanda HTML menyerupai:

<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>

Kod pengawal yang sepadan mengendalikan pengikatan:

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

Kebaikan:

• Struktur data ringkas
• Mudah bertukar-tukar dengan buah nama

Keburukan:

• Menyusahkan operasi tambah/buang kerana pengurusan berbilang senarai

Menggunakan Objek Tatasusunan

Sebagai alternatif, anda boleh menggunakan tatasusunan objek untuk input data:

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

Logik pengawal kekal seperti berikut:

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

Kebaikan:

• Tambah/buang yang dipermudahkan operasi

Keburukan:

• Struktur data yang lebih kompleks
• Togol yang menyusahkan mengikut nama (memerlukan kaedah pembantu)

Perbandingan

Setiap penyelesaian menawarkan kelebihan dan kelemahan, jadi memilih pendekatan terbaik bergantung pada keperluan khusus aplikasi anda.

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