Save values to an array on checkbox inside ng-repeat in AngularJS

Question

I have a scenario in which I have to put values in array when the checkbox is checked in ng-repeat.

<li ng-repeat="player in team.players">
  <div class="row">
     <div class="col-md-3 m-t-xs">
       <input type="checkbox" ng-model="vm.newEvent.players[$index].selected" ng-change="vm.selectPlayer($index, player)"> {{player.name}}
     </div>
     <div class="col-md-5 m-t-xs">
        <label for="">
         <input type="radio" name="{{player.id}}" ng-change="vm.disSelectPlayer($index, player)" ng-model="vm.newEvent.players[$index].casuality.type" value="injured"> Injured
        </label>
        <label for="">
         <input type="radio" name="{{player.id}}" ng-change="vm.disSelectPlayer($index, player)" ng-model="vm.newEvent.players[$index].casuality.type" value="sick"> Sick
        </label>
        <label for="">
         <input type="radio" name="{{player.id}}" ng-change="vm.disSelectPlayer($index, player)" ng-model="vm.newEvent.players[$index].casuality.type" value="other"> Other
        </label>
     </div>
  </div>
</li>

This is how it looks now in browser.

The issue is that when I clicked any of the player name in FC Barcelona Accordion it also selects the same indexed player from FC Bayern Munich Accordion, What I want is to keep all players separate form each-other. Am i missing something in the binding ??

There will be two indexes , one corresponding to your accordion(football clubs) and one corresponding to your football players. So there are two indexes which will together uniquely identify that particular attribute. — Vivz
– Vivz, Commented Aug 7, 2017 at 6:42
@Vivz how can I manage two indexes in one checkbox, any example?? — Ahmer Khan
– Ahmer Khan, Commented Aug 7, 2017 at 6:58

byteC0de · Accepted Answer · 2017-08-07 07:17:55Z

2

Use checklist-model, AngularJS directive for list of checkboxes

In Angular one checkbox <input type="checkbox" ng-model="..."> is linked with one model. But in practice we usually want one model to store array of checked values from several checkboxes. Checklist-model solves that task without additional code in controller. You should play with attributes of <input type="checkbox"> tag:

set checklist-model instead of ng-model
set checklist-value - what should be picked as array item

Documentation

answered Aug 7, 2017 at 7:17

byteC0de

5,3436 gold badges36 silver badges68 bronze badges

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

Comments

ZAhmed · Accepted Answer · 2017-08-07 06:39:27Z

0

This Because of this function: vm.disSelectPlayer($index, player)

I think you have to add index here <li ng-repeat="player in team.players"> in order to give each player different id or index.

Try This : <li ng-repeat="(key ,player) in team.players">

and use this Key in the function that you call : vm.disSelectPlayer($index, player , key)

I hope it is useful :)

answered Aug 7, 2017 at 6:39

ZAhmed

1,2908 silver badges15 bronze badges

Comments

Sachin Dongre · Accepted Answer · 2017-08-07 07:23:26Z

0

This is because on on line #4 you wrote

ng-model="vm.newEvent.players[$index].selected".

You have used parents object ie players, instead of this you can use

ng-model="vm.player.selected".

OR

ng-model="vm.team.players[$index].selected".

answered Aug 7, 2017 at 7:23

Sachin Dongre

254 bronze badges

Collectives™ on Stack Overflow

Save values to an array on checkbox inside ng-repeat in AngularJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related