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

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

Linda Hamilton
Lepaskan: 2024-11-19 04:21:02
asal
666 orang telah melayarinya

How to Bind Multiple Checkbox Values to a List in 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>
Salin selepas log masuk

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

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

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

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!

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