Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Mengikat Nilai Kotak Semak dengan Berkesan ke Senarai dalam AngularJS?

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

Mary-Kate Olsen
Lepaskan: 2024-11-24 00:22:11
asal
678 orang telah melayarinya

How to Effectively Bind Checkbox Values to Lists in 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>
Salin selepas log masuk

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 ...
  };
}]);
Salin selepas log masuk

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>
Salin selepas log masuk

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);
}]);
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan