Question

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

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

这是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>

UPDATE：这似乎适用于旧版本的angular 1.4.x.

Answer 1

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

这是在一个控制器内完成的，这是一个 BAD PRACTICE ，创建一个自定义指令来进行这样的操作。并使用提供的element变量来选择DOM元素select而不是document.querySelector()

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

Answer 2

对于可能遇到此问题的其他人，解决这个特定问题的地方使用轨道。

应该使用跟踪来确定select中唯一的选项，因此如果这是真正的解决方案，应该有不同的方法。

由于ng-options group by会生成optgroups，我们会利用它，因此我们可以在track by的对象上使用group by。 optgroups在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用于测试此。

选择ng-options组名称不会更新|动态ng-options组

2 个答案: