Wie binde ich Kontrollkästchenwerte effektiv an Listen in AngularJS?

Binden an Listen von Kontrollkästchenwerten mit AngularJS

Um Kontrollkästchenwerte an eine Liste in einem AngularJS-Controller zu binden, können Sie zwei unterschiedliche Ansätze nutzen:

Verwendung eines einfachen Arrays

Bei diesem Ansatz das HTML-Markup ähnelt:

<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 entsprechende Controller-Code übernimmt die Bindung:

app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {
  // Fruits: ['apple', 'orange', 'pear', 'naartjie']
  $scope.fruits = ...;

  // Selected fruits: ['apple', 'pear']
  $scope.selection = ...;

  // Toggle selection by fruit name
  $scope.toggleSelection = function toggleSelection(fruitName) {
    // ... code to manage selection ...
  };
}]);

Vorteile:

• Einfache Datenstruktur
• Einfaches Umschalten nach Obst Name

Nachteile:

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

Verwenden eines Objekts Array

Alternativ können Sie ein Array von Objekten für die Eingabe verwenden Daten:

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

Die Controller-Logik bleibt wie folgt:

app.controller('ObjectArrayCtrl', ['$scope', 'filterFilter', function ObjectArrayCtrl($scope, filterFilter) {
  // Fruits: [{ name: 'apple', selected: true }, ...]
  $scope.fruits = ...;

  // Selected fruits: [/* fruit names */]
  $scope.selection = ...;

  // Helper method to filter selected fruits
  $scope.selectedFruits = function selectedFruits() {
    return filterFilter($scope.fruits, { selected: true });
  };

  // Watch `fruits` for changes
  $scope.$watch('fruits|filter:{selected:true}', function (nv) {
    // ... code to update `$scope.selection` ...
  }, true);
}]);

Vorteile:

• Erleichtertes Hinzufügen/Entfernen Operationen

Nachteile:

• Komplexere Datenstruktur
• Umständliches Umschalten nach Namen (erfordert Hilfsmethoden)

Vergleich

Jede Lösung bietet ihre Vorteile und Nachteile, daher hängt die Auswahl des besten Ansatzes von den spezifischen Anforderungen Ihrer Anwendung ab.

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