Checkboxes with array model in AngularJS

Question

Here are my checkboxes :

<input type="checkbox" ng-model="data.lang[0]" id="FR" ng-true-value="'FR'" ng-false-value="''" checked/>FR <input type="checkbox" ng-model="data.lang[1]" id="NL" ng-true-value="'NL'" ng-false-value="''" />NL <input type="checkbox" ng-model="data.lang[2]" id="EN" ng-true-value="'EN'" ng-false-value="''" />EN 

I'd like to check a language and update my model 'data.lang'

But i have a problem :

If second checkbox is checked i have : [null,"NL"] If the third is checked i have : [null,null,'EN'] 

What i need to have :

If second checkbox is checked : ['NL'] If second and third are checked : ['NL','EN'] If all are checked : ['FR','NL','EN'] 

I don't know how to update my model like i want could you help me? Thanks

Answer 1

Change your data structure and ng-repeat your input similar to the below.

$scope.langs = [ { val: 'en', checked: false } ] <input type="checkbox" ng-repeat="lang in langs" ng-model="lang.checked">{{lang.val}}</input> 

Then do something like:

$scope.sendMyData() { $scope.langs.forEach(function(item) { if (item.checked) $scope.myData.push(item.value); }); } 

Answer 2

This is because your data.lang[] has length 3. i.e. if one value will there then other will be null.

Try this with ng-repeat so it will work.