javascript – AngularJS – ngModel绑定下拉值视觉上变化,而变量没有

前端之家收集整理的这篇文章主要介绍了javascript – AngularJS – ngModel绑定下拉值视觉上变化,而变量没有前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个下拉列表:
<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的值更新回到默认值?

更新:这是一个fiddle

更新:

新新新新旗新新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗旗

这看起来像是一个bug,我已经打开了一个issue.

更新:这已被解决了和fixed由angularjs团队; demo here.

解决方法

您看到的行为正是双重绑定的工作原理:

大多数开发人员对于双重约束而言都有一种“感觉”,而不是一种理解. “感觉”是模型绑定输入的任何视觉变化导致模型更改.

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

类似地,将值粘贴到模型绑定输入中通常不会导致模型被更新.

分析你的情况:

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

Angular的ng模型不关心您的下拉菜单中的“选项列表”.框架正在等待一些事件,这将导致它通过摘要循环并吸收所挑选的价值变化.即使某些东西“出现”改变,这是一个错觉或循环,取决于你的看法.

对于下拉菜单(选择元素),更改事件是一个选项上的“点击”.

猜你在找的JavaScript相关文章