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

【问题标题】：Save values to an array on checkbox inside ng-repeat in AngularJS将值保存到 AngularJS 中 ng-repeat 内的复选框上的数组
【发布时间】：2017-08-07 15:23:26
【问题描述】：

我有一个场景，当在 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 中选择相同的索引球员，我想要的是让所有玩家彼此分开。我在绑定中遗漏了什么吗？？

【问题讨论】：

我认为这些复选框具有相同的名称
是的，这就是我想要解决的问题。
使用一些 id 或计数器创建名称。
会有两个索引，一个对应你的手风琴（足球俱乐部），一个对应你的足球运动员。因此，有两个索引将共同唯一标识该特定属性。
@Vivz 如何在一个复选框中管理两个索引，有什么例子吗？？

标签： javascript angularjs arrays angularjs-ng-repeat

【解决方案1】：

使用 checklist-model，AngularJS 指令作为复选框列表

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

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

Documentation

【讨论】：

【解决方案2】：

这个因为这个函数：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)

希望有用:)

【讨论】：

【解决方案3】：

这是因为你在第 4 行写了

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

你已经使用了父母对象，即玩家，你可以使用

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

或

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

【讨论】：