Angular.js: Angular 1.6错误地重置`<select>的ng-model值</select>

创建于 2017-01-20  ·  3评论  ·  资料来源: angular/angular.js

注意:对于支持问题,请使用以下渠道之一: https :

您是否要请求功能或报告错误
漏洞

目前的行为是什么?
<option> s列表更改时,Angular 1.6重置<select> s的ng-model值(请参阅“其他信息”部分)。
Angular 1.5保留了它。

如果当前行为是错误,请通过https://plnkr.co或类似文件(模板:http://plnkr.co/edit/tpl:yBpEi4)提供重现步骤,并在可能的情况下提供最小的问题演示。 。
Angular 1.6: https= preview
Angular 1.5.11: https ://plnkr.co/edit/e0LVMEtGP2j4JxNf8lsp = preview

预期的行为是什么?
ng-model保留其价值。

改变行为的动机/用例是什么?
这是不对的。

哪个版本的Angular以及哪个浏览器/操作系统受此问题影响? 还请测试最新的稳定版和快照(https://code.angularjs.org/snapshot/)版本。
Angular 1.6.x会受到影响。
Angular 1.5.x不是。

其他信息(例如堆栈跟踪,相关问题,修复建议)
事情是Angular 1.6通过模型而不是options的值来跟踪选项。

在上面的代码片段中,options数组包含2个对象: [{val: "1"}, {val: "2"}]
ng-repeat遍历它们,并使用val属性作为选项值和标题。
vm.selected用作select的ng-model值,最初设置为“ 2”。

在按下Change options按钮后,我用以下命令替换了选项数组: [{val: "2"}, {val: "3"}]和Angular 1.6重置了vm.selected值,但这不应该,因为值2是仍在列表中。

在这种情况下,Angular 1.5的行为正确,并且保留了vm.selected值。

如果vm.options包含原始值,则不会出现错误( snippet )。

forms low investigation regression bug

最有用的评论

看起来这是https://github.com/angular/angular.js/commit/47c15fbcc10f118170813021e8e605ffd263ad84中的有意更改:“-当当前选择的选项被删除或其值更改时,模型设置为null。 ” 但这没有考虑到可能会中断,或者ngRepeat将摘要来更新选项。 在ngOptions中这样做也更容易,因为我们控制元素的创建/销毁。
但是scheduleRender()可以, @gkalpak可以! 我会看看它是否破坏测试并准备PR。

所有3条评论

似乎是有效问题,它在1.6.0-rc.0中中断。 不知道为什么以前没有发生过,但是问题似乎是这样的:

  1. 当数组更改时, ngRepeat会删除之前的<option>元素。
  2. 这将导致<select>被取消选择,而ngModel被设置为null。
  3. 新项目由ngRepeat创建和插入,但是modelValue不再是2 ,因此<select>无法将其与新的<option value="2" ...>关联。

一种解决方法是使用track by以避免破坏和重新创建<option>元素:

<option ng-repeat="option in options track by option.val" value="option.val">...

从快速的角度看,以下提交是导致此问题的候选对象(但可能是其他原因):

  • 02
  • 47c15fb
  • 2785ad7

首先,我将用scheduleRender()替换此行,看看是否有帮助...

我敢肯定@Narretz会有更好的见解:smiley:

一种解决方法是使用跟踪方式,以避免破坏和重新创建

是的,也找到了,但忘了mention

看起来这是https://github.com/angular/angular.js/commit/47c15fbcc10f118170813021e8e605ffd263ad84中的有意更改:“-当当前选择的选项被删除或其值更改时,模型设置为null。 ” 但这没有考虑到可能会中断,或者ngRepeat将摘要来更新选项。 在ngOptions中这样做也更容易,因为我们控制元素的创建/销毁。
但是scheduleRender()可以, @gkalpak可以! 我会看看它是否破坏测试并准备PR。

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

kishanmundha picture kishanmundha  ·  3评论

michael-letcher picture michael-letcher  ·  3评论

brijesh1ec picture brijesh1ec  ·  3评论

WesleyKapow picture WesleyKapow  ·  3评论

visnup picture visnup  ·  3评论