wie man an eine Liste von Kontrollkästchen -Werten in AngularJs binden?

Einführung

beim Umgang mit einer Reihe von Kontrollkästchen können sie an eine Liste in der Reglerin binden. Die NG-Model-Eigenschaft von AngularJS scheint jedoch darauf beschränkt zu sein, einen einzelnen Kontrollkästchen-Wert zu binden. In diesem Artikel wird zwei Ansätze zur Lösung dieses Problems untersucht, wobei entweder ein einfaches Array oder ein Array von Objekten als Eingabedaten eingesetzt wird. -1" ng-klick = "ToggleSelection (FruitName)" " > {{fruitname}}

controller:

app.controller ('SimplearrayCtrl', ['$ scope', Funktion SimplearrayCtrl ($ Scope) { // Früchte $ scope.fruits = ['Apple', 'Orange', 'Pear', 'Naartjie']; // Ausgewählte Früchte $ scope.Selection = ['Apple', 'Pear']; // Auswahl umschalten $ scope.toggleSelection = Funktion ToggleSelection (FruitName) { var idx = $ scope.Selection.indexof (fruitname); if (idx> -1) { $ scope.Selection.SPLICE (IDX, 1); } anders { $ scope.Selection.push (fruitname); } }; }]);

   {{fruitName}}

einfache Datenstruktur

   {{fruitName}}

Ansatz 2: Objekt array

• html:
{{fruit.name}}

controller:

app.controller ('ObjectArrayCtrl', ['$ scope', 'filterFilter', Funktion ObjectArrayCtrl ($ Scope, FilterFilter) {{{{{ // Früchte $ scope.fruits = [ {Name: 'Apple', ausgewählt: true}, {Name: 'Orange', ausgewählt: false}, {Name: 'Pear', ausgewählt: true}, {Name: 'Naartjie', ausgewählt: false} ]; // Ausgewählte Früchte $ scope.Selection = []; // Helfer für ausgewählte Früchte $ scope.selectedFruits = function selectedFruits () { Rückgabe filterfilter ($ scope.fruits, {ausgewählt: true}); }; // Obst für Änderungen beobachten $ scope. $ watch ('fruits | filter: {ausgewählt: true}', function (nv) { $ scope.Selection = nv.map (Funktion (Frucht) { Return Fruit.Name; }); }, WAHR); }]);

   {{fruit.name}}

More complex data structure

   {{fruitName}}

Demo: http://jsbin.com/imaquc/1/®&&&]