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

Question

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

但是，当使用开发人员工具查看标记时，我可以看到选项标签没有更新，特别是 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在 Controller 内selected="selected"添加到第二个选项(带有标签“B”)，但是后续更改(通过使用选择进行)不会相应地更新标记。

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

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

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

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