javascript - 在 ng-repeat 中设置变量并作为参数传递

Question

我在尝试将值从 ng-repeat 传递到我的 AngularJS Controller 时陷入困境。我觉得我不再知道有什么事情在做了。我不断尝试不同的改变，但没有成功。

我的目标是 1) 在下拉框中将数组显示为选项。 2)让用户选择一个选项 3) 单击一个按钮，将该选择提交给 Angular 函数。

我知道 Angular 函数(我没有包含在本示例中)正在工作，因为我可以静态地向它传递一个值并查看我期望的更新。问题是如何在变量中捕获用户选择，该变量可以作为参数传递给名为 $scope.changeHost(newHost) 的 $scope 函数。这是我遇到问题的 AngularJS HTML:

<form ng-submit="changeHost(newHost)">
<select type="text" class="form-control" ng-model="eveSingle.evePlayers">
<option ng-selected="{{eveSingle.evePlayers}}" value="{{eveSingle.evePlayers}}" ng-repeat="player in eveSingle.evePlayers">{{player}}</option>
</select>
<input class="btn submit-btn" type="submit" value="Change GM" />
</form>

这是(现已废弃)修改后的代码，可以按我的预期工作:

<form ng-submit="changeHost(eveSingle.eveHost)">
<select type="text" class="form-control" ng-model="eveSingle.eveHost" ng-options="player for player in eveSingle.evePlayers">
<option type="text" value="{{eveSingle.evePlayers}}">{{player}}</option>
</select>
<input class="btn submit-btn" type="submit" value="Change GM" />
</form>

根据下面的评论，这是最终更新。更改为 ng-options 后，我的代码中不再需要 HTML 选项。当我删除它时，这一点仍然工作正常。

<form ng-submit="changeHost(eveSingle.eveHost)">
<select class="form-control" ng-model="eveSingle.eveHost" ng-options="player for player in eveSingle.evePlayers">
</select>
<input class="btn submit-btn" type="submit" value="Change GM" />
</form>

Answer 1

用户选择是绑定(bind)到ng-model的变量值。因此，将 ng-model="eveSingle.evePlayers" 更改为 ng-model="eveSingle.selectedPlayer" (根据您的需要调整名称)，并将选定的播放器传递给更改主机:

ng-submit="changeHost(eveSingle.selectedPlayer)"

请注意，您应该删除 ng-selected="{{eveSingle.evePlayers}}" 和 type="text"(这适用于输入元素)。

顺便说一句，请注意，您可以(应该)使用 ng-options 语法而不是 ng-repeat-ed 选项。第一个允许您绑定(bind)到除字符串之外的其他类型的模型，而且它更有效，因为它不会为每个选项创建独立的范围。会是这样的:

<select class="form-control" ng-model="eveSingle.selectedPlayer" 
                             ng-options="player for player in eveSingle.evePlayers">
</select>