AngularJS Add Value Of Checkboxes To An Array

Answer :

ng-true-value only accepts strings so you'll need to use a workaround. This has been a feature request for some time. In the meantime, you can do this:

Create an ids object in the controller like:

$scope.ids = {}; 

and change ng-model to reference a key in that object. You can use the default true/false checkbox values:

<td><input type="checkbox" ng-model="ids[doc.provider.Id]"></td> 

Then you can loop over the keys in ids checking for true.

Here is a fiddle

I found that this directive provided the functionality I was looking for. The main problem I ran into with the more common solutions is that I have two arrays which I needed to store data compatible with a multi select list. The checklistModel directive provides this very basic functionality and works with multiple models.

I will start by saying that I really don't like the options for doing this in angular. I can't even say that this is better than the accepted answer, but it does keep the data in the model.

Markup:

<tr ng-repeat='(index, doc) in provider'>     <td><input type='checkbox' ng-true-value='{{doc.provider.Id}}' ng-model='ids[index]' /></td> </tr>  <span ng-repeat='id in ids'>{{id}} </span> 

Now just $watch the array value and filter when it changes in the controller (make sure to pass the object equality parameter):

$scope.ids = [];  $scope.updateIds = function() {     $scope.ids = $scope.ids.filter(function(id) {         return !!id;     }); };  $scope.$watch('ids', $scope.updateIds, true); 

When I started answering this question, I thought the most idiomatic options would be to add an ng-change directive on the input:

<input type='checkbox' ng-true-value='{{doc.provider.Id}}' ng-model='ids[index]' ng-change='updateIds()'/> 

Unfortunately this does not work as expected. The UI doesn't update properly when removing values. I also want to point out that you can do this without the repeat directive:

<input type='checkbox' ng-true-value='1' ng-model='ids.0' /> <input type='checkbox' ng-true-value='2' ng-model='ids.1' /> <input type='checkbox' ng-true-value='3' ng-model='ids.2' /> <input type='checkbox' ng-true-value='4' ng-model='ids.3' /> <input type='checkbox' ng-true-value='5' ng-model='ids.4' /> <input type='checkbox' ng-true-value='6' ng-model='ids.5' /> 

In this case, the $watch is definitely better than adding the ng-change to each input. Finally, here is a working plunkr. The$watch function does end up running twice each time a box is checked or unchecked, but that's really how it has to be!