Wie binde ich mehrere Kontrollkästchenwerte an eine Liste in AngularJS?

Wie bindet man an eine Liste von Kontrollkästchenwerten in AngularJS?

Einführung

Beim Umgang mit einer Reihe von Kontrollkästchen Für eine effektive Verwaltung kann es von entscheidender Bedeutung sein, ihre Werte an eine Liste im Controller zu binden. Die ng-model-Eigenschaft von AngularJS scheint jedoch auf die Bindung eines einzelnen Kontrollkästchenwerts beschränkt zu sein. In diesem Artikel werden zwei Ansätze zur Lösung dieses Problems untersucht, wobei entweder ein einfaches Array oder ein Array von Objekten als Eingabedaten genutzt wird.

Ansatz 1: Einfaches Array

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>

Controller:

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

Vorteile:

• Einfache Daten Struktur
• Einfaches Umschalten nach Namen

Nachteile:

• Umständliche Vorgänge zum Hinzufügen/Entfernen

Ansatz 2: Objektarray

HTML:

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

Controller:

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

Vorteile:

• Einfache Vorgänge zum Hinzufügen/Entfernen

Nachteile:

• Komplexere Datenstruktur
• Umständliches Umschalten nach Namen

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

Das obige ist der detaillierte Inhalt vonWie binde ich mehrere Kontrollkästchenwerte an eine Liste in AngularJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!