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

Bagaimana untuk Mengikat Kotak Semak AngularJS ke Senarai Nilai?

Linda Hamilton
Lepaskan: 2024-11-24 17:33:14
asal
497 orang telah melayarinya

How to Bind AngularJS Checkboxes to a List of Values?

Mengikat Kotak Semak AngularJS ke Senarai Nilai

Masalah:

Dalam AngularJS, senarai kotak pilihan dibentangkan dan objektifnya adalah untuk mewujudkan pengikatan antara mereka dan senarai dalam pengawal. Setiap kotak pilihan yang ditandai menunjukkan kemasukan nilai yang berkaitan dalam senarai.

Penyelesaian:

AngularJS menyediakan dua penyelesaian yang berdaya maju untuk masalah ini:

< ;h3>1. Tatasusunan Mudah sebagai Data Input

Dalam pendekatan ini, struktur HTML meniru senarai kotak semak:

<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 disertakan mengendalikan interaksi:

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

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

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

  // Toggle selection for a given fruit by name
  $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

2. Tatasusunan Objek sebagai Data Input

Menggunakan tatasusunan objek sebagai data input menambah kerumitan tambahan tetapi memudahkan operasi sisipan dan pemadaman:

<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

Kod pengawal mencerminkan perubahan:

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 method to get selected fruits
  $scope.selectedFruits = function selectedFruits() {
    return filterFilter($scope.fruits, { selected: true });
  };

  $scope.$watch('fruits|filter:{selected:true}', function (nv) {
    $scope.selection = nv.map(function (fruit) {
      return fruit.name;
    });
  }, true);
}]);
Salin selepas log masuk

Kelebihan dan Kelemahan:

  • Simple Array:

    • Struktur data yang mudah
    • Mudah bertukar-tukar dengan nama
    • Namun, penyisipan yang menyusahkan dan pemadaman
  • Susun Objek:

    • Struktur data yang lebih kompleks
    • Togol mengikut nama memerlukan kaedah pembantu
    • Walau bagaimanapun, sisipan dan pemadaman adalah sangat mudah

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

Atas ialah kandungan terperinci Bagaimana untuk Mengikat Kotak Semak AngularJS ke Senarai Nilai?. 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