填充基于另一个的下拉列表，第二个仍然记得旧的选择

Question

我有一个不受欢迎的行为：第二个下拉列表会记住旧项目？为什么呢？

http://jsfiddle.net/Xku9z/（从另一个线索借来的小提琴）

情景：

• 步骤1.在第一个下拉列表中选择一个项目
• 步骤2.在第二个下拉列表中选择一个项目
• 步骤3.在第一个下拉列表中选择一个项目（不在第二个下拉列表中选择任何内容）
• 步骤4.在第一个下拉列表中选择与步骤1中相同的项目。

我不知道如何解决这个问题，我一直在使用$ scope。$ watch on ng-model =＆＃34; option2＆＃34;只是为了抓住问题而没有成功。

另外，通过在option2 = null中设置data-ng-change="getOptions2()"不会有帮助：

$scope.getOptions2 = function(){
  $scope.option2 = null;
};

有什么想法吗？感谢

Answer 1

如果您观看$scope.option2值，您遇到的行为会更容易理解。

当您更改第一个下拉列表时，实际上不会修改$scope.option2值。它保持不变：它被记住了。为了让它像你想要的那样工作只需添加一行

$scope.option2 = null;

在getOptions2函数结束时。而已。如果您想了解当前行为的更多解释，请继续阅读。

如果记住该值，当我更改第一个选项时，为什么第二个选择变为空白？

当且仅当<select>的值可以在使用ng-model绑定到此元素的数组中找到时，

ng-options元素才会显示所选值。

从两个下拉菜单中选择第一项。现在：

$scope.option2 = "option2 - 1-1";
$scope.options2 = ["option2 - 1-1","option2 - 1-2","option2 - 1-3"];

如您所见，可以在数组中找到第一个变量，因此该值显示为当前选定的值。现在只将第一个下拉列表更改为第二个项目：

$scope.option2 = "option2 - 1-1";
$scope.options2 = ["option2 - 2-1","option2 - 2-2","option2 - 2-3"];

如您所见，$scope.option2未更改，但它不再位于$scope.options2数组中。因此，它的值不是当前选择的显示器。