CODEWITHSUNDEEP
angularjscheckboxmodel
Vincent Ducroquet
Vincent Ducroquet

Reputation: 924

Checkboxes with array model in AngularJS

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

Upvotes: 0

Views: 3517

Answers (2)

Brant
Brant

Reputation: 1788

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);
  });
}

Upvotes: 2

Saurabh Agrawal
Saurabh Agrawal

Reputation: 7739

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.

Upvotes: 0

Related Questions