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

Bindung an eine Liste von Kontrollkästchenwerten in AngularJS

Um mehrere Kontrollkästchenwerte einer Liste im Controller zuzuordnen, gibt es zwei Hauptansätze : Verwendung eines einfachen Arrays oder eines Arrays von Objekten.

Verwendung eines einfachen Arrays

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

Im Controller:

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

Vorteile:

• Vereinfachte Datenstruktur
• Einfaches Umschalten nach Namen

Nachteile:

• Umständliche Vorgänge zum Hinzufügen/Entfernen aufgrund der Verwaltung von zwei Listen

Verwendung eines Arrays von Objekten

Im HTML:

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

Im Controller:

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

Vorteile:

• Einfache Vorgänge zum Hinzufügen/Entfernen

Nachteile:

• Komplexere Datenstruktur
• Umständlich oder erfordert Hilfsmethoden zum Umschalten nach Namen

Zusätzliche Hinweise:

• Eine Live-Demo finden Sie unter http://jsbin.com/ImAqUC/1/.
• Wählen Sie die aus Kontrollkästchenwerte, die Sie binden möchten, und die entsprechende Liste im Controller wird automatisch aktualisiert.

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