Heim > Web-Frontend > js-Tutorial > Wie binde ich Kontrollkästchenwerte effizient an eine Liste in AngularJS?

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

Linda Hamilton
Freigeben: 2024-11-21 02:08:11
Original
830 Leute haben es durchsucht

How to Efficiently Bind Checkbox Values to a List 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>
Nach dem Login kopieren

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);
  };
}]);
Nach dem Login kopieren

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>
Nach dem Login kopieren

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);
}]);
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage