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

Mit einer Zeichenfolge von $index können Sie eine HashMap aus ausgewählten Werten verwenden:

Auf diese Weise wird das ng-model-Objekt mit dem Schlüssel aktualisiert, der den Index darstellt.

$scope.someObject = {};

Nach einer Weile sollte $scope.someObject ungefähr so aussehen:

$scope.someObject = {
     0: true,
     4: false,
     1: true
};

Diese Methode funktioniert nicht für alle Situationen, aber sie ist einfach umzusetzen.

Answer 2

Da Sie eine Antwort akzeptiert haben, in der keine Liste verwendet wurde, gehe ich davon aus, dass die Antwort auf meine Kommentarfrage "Nein, es muss keine Liste sein" lautet. Außerdem hatte ich den Eindruck, dass Sie vielleicht das HTML serverseitig renderten, da in Ihrem Beispiels-HTML "checked" vorhanden ist (dies wäre nicht erforderlich, wenn ng-model verwendet würde, um Ihre Kontrollkästchen zu modellieren).

Wie dem auch sei, das hatte ich im Sinn, als ich die Frage stellte, unter der Annahme, dass Sie das HTML serverseitig generiert haben:

    apple
    orange
    pear
    naartjie
    {{checkboxes}}

ng-init ermöglicht es, dass serverseitig generiertes HTML bestimmte Kontrollkästchen zunächst festlegt.

Fiddle.

Answer 3

Ich denke, der einfachste Workaround wäre die Verwendung von 'select' mit 'multiple' spezifiziert:

Ansonsten denke ich, du musst die Liste verarbeiten, um die Liste zu konstruieren (indem du das Modellarray mit Kontrollkästchen über $watch() bindest).

Answer 4

Die folgende Lösung scheint eine gute Option zu sein,

   {{fruit.fruitName}}

Und im Controller wird der Wert des Modells fruits so aussehen

$scope.fruits = [
  {
    "name": "apple",
    "checked": true
  },
  {
    "name": "orange"
  },
  {
    "name": "grapes",
    "checked": true
  }
];

Answer 5

Ein weiteres einfaches direktes Ausrufen könnte folgendermaßen aussehen:

var appModule = angular.module("appModule", []);

appModule.directive("checkList", [function () {
return {
    restrict: "A",
    scope: {
        selectedItemsArray: "=",
        value: "@"
    },
    link: function (scope, elem) {
        scope.$watchCollection("selectedItemsArray", function (newValue) {
            if (_.contains(newValue, scope.value)) {
                elem.prop("checked", true);
            } else {
                elem.prop("checked", false);
            }
        });
        if (_.contains(scope.selectedItemsArray, scope.value)) {
            elem.prop("checked", true);
        }
        elem.on("change", function () {
            if (elem.prop("checked")) {
                if (!_.contains(scope.selectedItemsArray, scope.value)) {
                    scope.$apply(
                        function () {
                            scope.selectedItemsArray.push(scope.value);
                        }
                    );
                }
            } else {
                if (_.contains(scope.selectedItemsArray, scope.value)) {
                    var index = scope.selectedItemsArray.indexOf(scope.value);
                    scope.$apply(
                        function () {
                            scope.selectedItemsArray.splice(index, 1);
                        });
                }
            }
            console.log(scope.selectedItemsArray);
        });
    }
};
}]);

Der Controller:

appModule.controller("sampleController", ["$scope",
  function ($scope) {
    //#region "Scope Members"
    $scope.sourceArray = [{ id: 1, text: "val1" }, { id: 2, text: "val2" }];
    $scope.selectedItems = ["1"];
    //#endregion
    $scope.selectAll = function () {
      $scope.selectedItems = ["1", "2"];
  };
    $scope.unCheckAll = function () {
      $scope.selectedItems = [];
    };
}]);

Und das HTML:

Ich habe auch einen Plunker eingefügt: http://plnkr.co/edit/XnFtyij4ed6RyFwnFN6V?p=preview