将值保存到 AngularJS 中 ng-repeat 中复选框上的数组

Question

我有一个场景，当在 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>

这是它现在在浏览器中的样子。

问题是，当我点击 FC Barcelona Accordion 中的任何球员姓名时，它还会从 FC Bayern Munich Accordion[=] 中选择相同的索引球员23=]，我想要的是让所有玩家彼此分开。我在绑定中遗漏了什么吗？？

Answer 1

这个因为这个函数：vm.disSelectPlayer($index, player)

我认为您必须在此处添加索引 <li ng-repeat="player in team.players"> 以便为每个玩家提供不同的 ID 或索引。

试试这个： <li ng-repeat="(key ,player) in team.players">

并在您调用的函数中使用此键： vm.disSelectPlayer($index, player , key)

希望有用:)

Answer 2

使用清单模型，Angular复选框列表的 JS 指令

在 Angular 中，一个复选框 <input type="checkbox" ng-model="..."> 与一个模型相关联。但在实践中，我们通常希望一个模型存储来自多个复选框的选中值数组。清单模型无需控制器中的额外代码即可解决该任务。您应该使用 <input type="checkbox"> 标签的属性：

设置checklist-model而不是ng-model
set checklist-value - 应该选择什么作为数组项

Documentation

Answer 3

这是因为您在第 4 行写了

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

你用过parentsobject即玩家，你可以用

代替这个

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

或

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

将值保存到 AngularJS 中 ng-repeat 中复选框上的数组

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

javascript

arrays

angularjs

angularjs-ng-repeat