CODEWITHSUNDEEP
javascriptangularjsarraysangularjs-ng-repeat
Ahmer Khan
Ahmer Khan

Reputation: 767

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

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.

enter image description here

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 ??

Upvotes: 2

Views: 1390

Answers (3)

Sachin Dongre
Sachin Dongre

Reputation: 25

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".

Upvotes: 0

byteC0de
byteC0de

Reputation: 5273

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

Upvotes: 2

ZAhmed
ZAhmed

Reputation: 1290

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 :)

Upvotes: 0

Related Questions