AngularJS - ngModel绑定下拉列值在视觉上发生变化,而变量则没有

Question

我有一个下拉列表:

<select
   ng-model="filter.country"
   ng-options="country.code as country.name for country in countries"
   ng-change="broadcast()">
   <option value="">All Countries</option>
</select>

$scope.countries最初由服务填充,然后另一个下拉更改事件将$scope.countries通过再次调用服务来限制值,通过另一个下拉列表的选定项.

这里的问题是什么时候$scope.filter.country绑定了一个值(默认值除外)并$scope.countries更新到一个不包含$scope.filter.country值的新列表.我可以看到国家/地区下拉列表恢复其默认选项"所有国家/地区",但$scope.filter.country仍保持原样.

关于这种情况的任何想法？不应该$scope.filter.country更新回到默认值？

更新:这是一个小提琴

更新:

为了说明这一点,这里是一个小提琴的截图:

这对我来说看起来像个错误,我已经为它开了一个问题.

更新:这已由angularjs团队解决和修复 ; 在这里演示.

Answer 1

您看到的行为正是双重绑定应该如何工作:

大多数开发人员对双重绑定的"感觉"超过理解."感觉"是模型绑定输入的任何视觉变化都会导致模型更改.

但是,任何尝试模式绑定JQuery日期选择器的开发人员都会证明这种现象:JQuery Date-Picker不会更新绑定到同一输入的角度模型.换句话说,通过JQuery选择日期不会注册任何AngularJS事件.

同样,将值粘贴到模型绑定输入中通常不会导致模型更新.

分析你的案例:

您已更改模型绑定下拉列表的选项列表.因此,显示的选项将恢复为默认值 - >因为模型绑定值不是相关选项.

Angular ng-model不关心下拉列表的"选项列表".该框架正在等待某些事件,这将导致它在摘要周期中运行并吸收所选值的变化.即使某些东西"出现"要改变,这也是一种幻觉或环洞,取决于你如何看待它.

对于下拉列表(选择元素),更改事件是选项上的"单击".