Wie binde ich eine Liste von Kontrollkästchenwerten mit AngularJS?

Question

Ich habe ein paar Kontrollkästchen:

Die ich gerne an eine Liste in meinem Controller binden möchte, so dass der Controller immer eine Liste aller ausgewählten Werte führt, zum Beispiel ['apple', 'pear'].

ng-model scheint nur den Wert eines einzelnen Kontrollkästchens an eine Variable im Controller binden zu können.

Gibt es einen anderen Weg, dies zu tun, damit ich die vier Kontrollkästchen an eine Liste im Controller binden kann?

Answer 1

Es gibt zwei Möglichkeiten, dieses Problem anzugehen. Verwenden Sie entweder ein einfaches Array oder ein Array von Objekten. Jede Lösung hat ihre Vor- und Nachteile. Unten finden Sie jeweils eine für jeden Fall.

---

Mit einem einfachen Array als Eingabedaten

Der HTML-Code könnte wie folgt aussehen:

   {{fruitName}}

Und der entsprechende Controller-Code wäre:

app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {

  // Früchte
  $scope.fruits = ['Apfel', 'Orange', 'Birne', 'Naartjie'];

  // Ausgewählte Früchte
  $scope.selection = ['Apfel', 'Birne'];

  // Auswahl für eine bestimmte Frucht nach Namen umschalten
  $scope.toggleSelection = function toggleSelection(fruitName) {
    var idx = $scope.selection.indexOf(fruitName);

    // Ist aktuell ausgewählt
    if (idx > -1) {
      $scope.selection.splice(idx, 1);
    }

    // Ist neu ausgewählt
    else {
      $scope.selection.push(fruitName);
    }
  };
}]);

Vorteile: Einfache Datenstruktur und Umschalten nach Namen ist einfach zu handhaben

Nachteile: Hinzufügen/Entfernen ist umständlich, da zwei Listen (die Eingabe und die Auswahl) verwaltet werden müssen

---

Mit einem Objekt-Array als Eingabedaten

Der HTML-Code könnte wie folgt aussehen:

   {{fruit.name}}

Und der entsprechende Controller-Code wäre:

app.controller('ObjectArrayCtrl', ['$scope', 'filterFilter', function ObjectArrayCtrl($scope, filterFilter) {

  // Früchte
  $scope.fruits = [
    { name: 'Apfel',    selected: true },
    { name: 'Orange',   selected: false },
    { name: 'Birne',     selected: true },
    { name: 'Naartjie', selected: false }
  ];

  // Ausgewählte Früchte
  $scope.selection = [];

  // Hilfsmethode, um ausgewählte Früchte zu erhalten
  $scope.selectedFruits = function selectedFruits() {
    return filterFilter($scope.fruits, { selected: true });
  };

  // Überwache Früchte auf Änderungen
  $scope.$watch('fruits|filter:{selected:true}', function (nv) {
    $scope.selection = nv.map(function (fruit) {
      return fruit.name;
    });
  }, true);
}]);

Vorteile: Hinzufügen/Entfernen ist sehr einfach

Nachteile: Etwas komplexere Datenstruktur und Umschalten nach Namen ist umständlich oder erfordert eine Hilfsmethode

---

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

Answer 2

Eine einfache Lösung:

       {{color}} 

  Farben: {{colors}}

  var app = angular.module('plunker', []);

  app.controller('MainCtrl', function($scope){
      $scope.colors = {Blue: true, Orange: true};
  });

http://plnkr.co/edit/U4VD61?p=preview

Answer 3

.

function SomeCtrl ($scope) {
    $scope.fruits = ["Apfel, Orange, Birne, Naartjie"];
    $scope.checkedFruits = [];
    $scope.toggleCheck = function (Obst) {
        if ($scope.checkedFruits.indexOf(Obst) === -1) {
            $scope.checkedFruits.push(Obst);
        } else {
            $scope.checkedFruits.splice($scope.checkedFruits.indexOf(Obst), 1);
        }
    };
}

Answer 4

Hier ist eine schnelle kleine wiederverwendbare Direktive, die anscheinend das tut, was Sie tun möchten. Ich habe es einfach checkList genannt. Es aktualisiert das Array, wenn sich die Kontrollkästchen ändern, und aktualisiert die Kontrollkästchen, wenn sich das Array ändert.

 ` app.directive ('checkList', function () {
  return {
    scope: {
      list: '= checkList',
      Wert: '@'
    },
    link: function (scope, elem, attrs) {
      var handler = function (setup) {
        var checked = elem.prop ('checked');
        var index = scope.list.indexOf (scope.value);

        Wenn (überprüft && index == -1) {
          if (setup) elem.prop ('checked', false);
          sonst scope.list.push (scope.value);
        } else wenn (!überprüft && index! = -1) {
          if (setup) elem.prop ('checked', true);
          sonst scope.list.splice (index, 1);
        }
      };

      var setupHandler = handler.bind (null, true);
      var changeHandler = handler.bind (null, false);

      elem.bind ('change', function () {
        scope.$apply (changeHandler);
      });
      scope. $ watch ('list', setupHandler, true);
    }
  };
});
` 

Hier ist ein Controller und eine Ansicht, die zeigt, wie Sie es verwenden könnten.

 ` 

  {{fruit}} 

 Die folgenden Früchte sind ausgewählt: {{checked_fruits | json}} 

 Fügen Sie Frucht manuell zum Array hinzu:
    {{fruit}} 

`      ` app.controller ('MainController', function ($ scope) {
  $ scope.fruits = ['Apfel', 'Orange', 'Birne', 'Naartjie'];
  $ scope.checked_fruits = ['Apfel', 'Birne'];
  $ scope.addFruit = function (fruit) {
    if ($ scope.checked_fruits.indexOf (fruit)! = -1) zurück;
    $ scope.checked_fruits.push (fruit);
  };
});
` 

(Die Schaltflächen zeigen, dass das Ändern des Arrays auch die Kontrollkästchen aktualisiert.)

Schließlich hier ist ein Beispiel für die Direktive in Aktion auf Plunker: http://plnkr.co/edit/3YNLsyoG4PIBW6Kj7dRK?p=preview

Answer 5

Basierend auf den Antworten in diesem Thread habe ich die checklist-model Direktive erstellt, die alle Fälle abdeckt:

• einfaches Array von Primitiven
• Array von Objekten (id oder das gesamte Objekt auswählen)
• Eigenschaften eines Objekts durchgehen

Für den Fall des Themenstarters wäre es:

     {{fruit}}