Deutsch English

Checkbox-Liste mit Angular binden

In diesem Blog möchte ich euch einen Weg zeigen, wie ihr in Angular eine Liste von Checkboxen vom Controller aus binden könnt, so dass der Controller eine Liste von allen checked Werten hat, die auch bei Änderungen mitgeändert wird.
Checkboxes:

<input type='checkbox' value="Orange" checked>
<input type='checkbox' value="Apfel">
<input type='checkbox' value="Birne" checked>
<input type='checkbox' value="Kiwi">


Controller Code:

<label ng-repeat="Fruchtname">
   <input
      type="checkbox"
      name="selFrucht[]"
      value="{{fruchtName}}"
      ng-checked="selection.indexOf(fruchtName) > -1"
      ng-click="toggleSelection(fruchtName)"
   > {{fruchtName}}
</label>

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

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

   // Selektierte fruits
   $scope.selection = ['Orange', 'Birne'];

   // Toggle Selection für eine bestimme Frucht
   $scope.toggleSelection = function toggleSelection(fruchtName) {
   var i = $scope.selection.indexOf(fruchtName);


   if (i > -1) {
      $scope.selection.splice(i, 1);
   }

   else {
      $scope.selection.push(fruchtName);
   }
};
}]);