选择 ng-options 组名称未更新 |动态 ng 选项组答案

【问题标题】：Select ng-options group names are not updating | Dynamic ng-options groups选择 ng-options 组名称未更新 |动态 ng 选项组
【发布时间】：2016-09-09 13:19:31
【问题描述】：

我有一个带有分组 ng 选项的下拉选择。用户应该能够在输入字段中动态更改组名的命名。 在更改组名称值时，选择指令不会被更新，除非您进行新的选择。

有人遇到过同样的问题吗？

这是 jsbin： http://jsbin.com/ziyeduzalo/edit?html,js,output

这是我的代码的样子： .js

$scope.players = [
  {name: 'Gene', team: 'alpha'},
  {name: 'George', team: 'beta'},

];


$scope.change = function() {
  $scope.players[0].team = 'new-group-name';
};

.html

<select ng-options="player.name group by player.team for player in players " ng-model="systemType.tertiaryEquipment"></select>

更新：这似乎适用于旧版本的 Angular 然后 1.4.x。

【问题讨论】：

我不明白为什么，但这个例子在 jsfiddle 中工作检查它here
这是因为 Angular.js 版本。尝试将其从 1.0.x 更改为 1.4.x 并不起作用。
在您的示例中，将 track by player.team 放在 ng-options 的末尾。 jsfiddle
并且angular的版本是1.4.9
这是正确答案！谢谢！

标签： angularjs select ng-options angularjs-ng-options

【解决方案1】：

对于可能遇到此问题的其他人，此特定问题的解决方案在何处使用跟踪。

应该使用跟踪来标识select 中唯一的选项，因此应该有不同的方法来判断这是否是真正的解决方案。

由于ng-options group by 将生成optgroups，因此我们可以使用它，因此我们可以在group by 的对象上使用track by。 optgroup 在select 的显示上将是唯一的。

所以在这种情况下：

<select ng-options="player.name group by player.team for player in players track by player.team" ng-model="systemType.tertiaryEquipment"></select>

jsfiddle

注意： Angular 版本 1.4.9 用于测试。

【讨论】：

【解决方案2】：

在这里，我编辑了您的 js bin 的副本。基本上我已经告诉 angularJS 重新编译选择输入，以便它改变。

这是在控制器中完成的，这是一种不良做法，请创建自定义指令来执行此类操作。并使用提供的element 变量来选择DOM 元素select 而不是document.querySelector()

http://jsbin.com/miyecireba/1/edit?html,js,output

【讨论】：

谢谢。这确实是一种非常丑陋的做法。希望有更好的方法来解决这个问题。
目前，在 bin 中。如果您为自己创建一个指令，那还不错。重新编译一个 DOM 元素对用户来说并不繁重