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

Mengikat kepada Senarai Nilai Kotak Semak dalam AngularJS

Untuk mengaitkan berbilang nilai kotak semak dengan senarai dalam pengawal, terdapat dua pendekatan utama : menggunakan tatasusunan ringkas atau tatasusunan objek.

Menggunakan Simple Array

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

Dalam pengawal:

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

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

  $scope.toggleSelection = function toggleSelection(fruitName) {
    var idx = $scope.selection.indexOf(fruitName);
    idx > -1 ? $scope.selection.splice(idx, 1) : $scope.selection.push(fruitName);
  };
}]);

Kelebihan:

• Struktur data ringkas
• Togol mudah dengan nama

Kelemahan:

• Menyusahkan operasi tambah/buang kerana pengurusan dua senarai

Menggunakan Susunan Objek

Dalam HTML:

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

Dalam pengawal:

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

  $scope.fruits = [
    { name: 'apple',    selected: true },
    { name: 'orange',   selected: false },
    { name: 'pear',     selected: true },
    { name: 'naartjie', selected: false }
  ];

  $scope.selection = [];

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

• Tambah/buang dengan mudah operasi

Kelemahan:

• Struktur data yang lebih kompleks
• Menyusahkan atau memerlukan kaedah pembantu untuk menukar nama

Tambahan Nota:

• Demo langsung boleh didapati di http://jsbin.com/ImAqUC/1/.
• Pilih nilai kotak semak yang anda ingin ikat dan senarai yang sepadan dalam pengawal akan dikemas kini secara automatik.

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