Wie binde ich AngularJS-Kontrollkästchen an eine Werteliste?

AngularJS-Kontrollkästchen an Werteliste binden

Problem:

In AngularJS wird eine Liste von Kontrollkästchen angezeigt und Ziel ist es, eine Verbindung zwischen ihnen und einer Liste im Controller herzustellen. Jedes aktivierte Kontrollkästchen zeigt die Aufnahme des zugehörigen Werts in die Liste an.

Lösung:

AngularJS bietet zwei praktikable Lösungen für dieses Problem:

< ;h3>1. Einfaches Array als Eingabedaten

Bei diesem Ansatz ahmt die HTML-Struktur die Kontrollkästchenliste nach:

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

Der zugehörige Controller-Code übernimmt die Interaktion:

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. Objektarray als Eingabedaten

Die Verwendung eines Objektarrays als Eingabedaten erhöht die Komplexität, vereinfacht aber Einfüge- und Löschvorgänge:

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

Der Controller-Code spiegelt die Änderung wider:

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

Vorteile und Nachteile:

• Einfaches Array:

  • Einfache Datenstruktur
  • Einfaches Umschalten nach Namen
  • Allerdings umständliches Einführen und Löschen

• Objektarray:

  • Komplexere Datenstruktur
  • Umschalten nach Namen erfordert Hilfsmethoden
  • Das Einfügen und Löschen ist jedoch sehr schwierig einfach

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

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