为什么 Angular 在正确更新模型时不通过将 'selected' 属性添加到 ng-options 中的 <option> 标记来更新 DOM？

Question

使用 Angular 1.2.29 当我用 ng-options 构建一个 <select> 时，它表面上看起来可以按预期工作，当我 select 一个选项模型时已更新，视觉上 <select> 表示已选择新的 selected 选项。

但是，当使用开发人员工具查看标记时，我可以看到选项标签没有更新，特别是 selected 属性没有从以前的 selected 选项中删除，它也没有添加到新的 selected 选项中。

<div data-ng-controller="MainController as main">

  <pre> {{ main.test.item }} </pre>

  <select
    data-ng-model="main.test.item"
    data-ng-options="item.label for item in main.test.items"
    required="required">
    <option value="" label="What do you want?"></option>
  </select>

</div>

通过在控制器中设置模型 this.test.item selected="selected" 添加到第二个选项（带有标签 'B'），但是后续更改（通过使用 select) 不要相应地更新标记。

angular
  .module('myApp')
  .controller('MainController', MainController);

function MainController () {

  this.test = {};

  this.test.items = [
    { label : 'A' },
    { label : 'B' },
    { label : 'C' }
  ];

  // Pre-select the second item.
  this.test.item = this.test.items[1];
}

模型保持最新很好，但为什么加价保持不变？

如何解决此问题以使其更新以匹配模型？

https://jsfiddle.net/paulhhowells/4hmwhbe8/

Answer 1

抱歉，显然没有足够的声誉来 post 发表评论。

@paulhhowells 我认为那里的答案仍然适用。详细来说，DOM 具有属性和属性。属性具有您关心的实际值，它们会随着您更改选择而更新。当您在标记中看到 selected="selected" 时，您看到的是属性被选中。属性不会在您更改选择时更新，它们存在于创建元素的标记中，通常用于初始化元素的 properites

编辑：jQuery 文档中有更好的解释，请查看属性与属性部分 here。

Answer 2

不应更新 selected 属性。

仅用于表示它所在的option应该初始选中。

https://developer.mozilla.org/en/docs/Web/HTML/Element/option

因此，Angular 在正确更新模型时不会通过向 ng-options 内的 <option> 标签添加 'selected' 属性来更新 DOM ，因为它不应该。

为什么 Angular 在正确更新模型时不通过将 'selected' 属性添加到 ng-options 中的 <option> 标记来更新 DOM？

Why does Angular not update the DOM by adding a 'selected' attribute to an <option> tag within ng-options when it correctly updates the model?

javascript

select

angularjs

ng-options