Bind a list of checkboxes in AngularJS

Question

I have a list of checkboxes as following:

<div ng-repeat="formationType in formationTypeList">
  <label>
  <input type="checkbox" class="md-warn md-align-top-left"
    ng-model="formationSelection[$index]" 
    ng-true-value="{{formationType}}" 
    name="formationSelection[]">
    {{ formationType.nom }}
  </label>
</div>

As you can see this checkboxes are initialized with values in formationSelection[] array.

And when I check some checkbox the value of this checkbox is added to that array.

The formationTypeList contains a list of objects, each object is attached to a checkbox.

In my scenario the first time I have the formationSelection[] empty so when I check some checkboxes and I send my form the values in that array will be stored in a database, and when I back o my application I want to see the checkboxes I've selected so I populate that array with values from the database and then I can see the ones which was selected.

The problem I have is the checkboxes are only selected in one case if I have in formationSelection[] the first element or the first, second elements or the first, second and third elements, but when I have for example the second and the fourth elements, they are not selected.

this is a plunker for the working case:

http://plnkr.co/edit/I7NK8Tkw3Rzwh1Zj2X78?p=preview

and this is a plunker for the non working case:

http://plnkr.co/edit/82FDQlhTtd09scs9cCDz?p=preview

Why am I getting this behavior, and how can I solve it?

keep formationSelection length the same as formationTypeList by place null element where which is not selected. — Yin Gang
– Yin Gang, Commented May 10, 2016 at 16:06

Yin Gang · Accepted Answer · 2016-05-10 16:24:53Z

1

Keep formationSelection length the same as formationTypeList, it will work.

$scope.formationSelection = (function(selection,list){
  var result = new Array(list.length);
  Array.prototype.map.call(selection,function(val,index){
    var pos = Array.prototype.map.call(list,function(v,i){
      return v.codeFormation;
    }).indexOf(val.codeFormation);
    result[pos] = val;
  });
  return result;
})($scope.formationSelection,$scope.formationTypeList);

Plunker here.

answered May 10, 2016 at 16:24

Yin Gang

1,4431 gold badge10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bind a list of checkboxes in AngularJS

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related