Angular Multi-Checkbox Array in ng-repeat

Question

I'm trying to build part of a simple form with Angular yet struggling with a small part of it.

Part of the form has a 'Divisions' section with a list of checkboxes that are dynamically populated from an API call. The user then can select anywhere from 1 to 7 different checkboxes to select which 'Division' the form belongs to.

Then when the user submits the form it should post JSON looking like Divisions: 'div1 div2 div3 div4'

The issue I'm having is for some reason I can't select more than one checkbox at a time. If I try and select another one, it unchecks the first one I selected.

This is the code I'm working with.

 <label>Divisions Participating*</label> <div class="radio-check-wrap"> <ul class="radio-check-group"> <li ng-repeat="d in divisions"> <input type="checkbox" ng-model="tradeshow.DivisionLead" ng-true-value="div{{$index}}" class="" id="div{{$index}}" name="div{{$index}}" /> <label for="div{{$index}}">{{d.Description}}</label> </li> </ul> </div> 

Also for clarification there is a $scope.divisions = Api.divisions.query(); and a $scope.tradeshow = {} in the controller.

Any idea why I'm unable to select more than one checkbox at a time?

Answer 1

Your checkboxes are storing the selected value on the same scope object (they all have the same ng-model), so as the check is changed, the ng-model is updated to reflect the newly checked box (which removes the check from the previous).

Here's an answer that shows you the two ways to approach the problem: How do I bind to list of checkbox values with AngularJS?

I made the changes for the object array as input data: http://plnkr.co/edit/otVgVMtwUGkIwr2uaSpq?p=preview

You need to store the "selected" value on the item, then compute which are selected. So I've changed your checkboxes to this:

<input type="checkbox" ng-model="d.selected" class="" id="div{{$index}}" name="selectedDivisions[]" /> 

I've updated your code with methods for getting and storing the selected values:

$scope.divisions = [ { Description: 'test1' }, { Description: 'test2' }, { Description: 'test3' }, { Description: 'test4' } ]; // selected divisions $scope.selection = []; // helper method $scope.selectedDivisions = function selectedDivisions() { return filterFilter($scope.divisions, { selected: true }); }; // watch divisions for changes $scope.$watch('divisions|filter:{selected:true}', function (nv) { $scope.selection = nv.map(function (division) { return division.Description; }); }, true); 

Answer 2

this seems to do what you want, an array of checkboxes all backed by a single model: http://vitalets.github.io/checklist-model/