Bagaimana untuk Mengikat Kotak Semak AngularJS ke Senarai Nilai?

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>

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

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>

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

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!