Почему Angular не обновляет DOM, добавляя атрибут «selected» к тегу «option» в ng-options, когда он правильно обновляет модель?

Используя Angular 1.2.29, когда я создаю <select> с 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 в контроллере 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/


javascript angularjs select ng-options
person paulhhowells    schedule 11.01.2016    source источник
comment
Можете ли вы включить небольшой jsfiddle?   -  person devqon    schedule 11.01.2016
comment
Возможно, вас заинтересуют ответы на stackoverflow.com/questions/29837387/   -  person Adam Axtmann    schedule 11.01.2016
comment
@AdamAxtmann ура, я просматривал stackoverflow, но не видел этого   -  person paulhhowells    schedule 11.01.2016
comment
@AdamAxtmann Я посмотрел, но я считаю, что причина этой проблемы в другом. то есть: в моем примере я предварительно выбрал второй элемент в списке, чтобы модель использовала элемент из этого списка — и это прекрасно работает, моя проблема заключается в том, что не происходит дальше.   -  person paulhhowells    schedule 11.01.2016
comment
@devqon хорошая идея, добавлено!   -  person paulhhowells    schedule 11.01.2016

Ответы (2)


arrow_upward
2
arrow_downward

Извините, видимо, недостаточно репутации, чтобы оставлять комментарии.

@paulhhowells Я думаю, что ответ все еще актуален. Чтобы уточнить, DOM имеет свойства и атрибуты. Свойства имеют фактические значения, которые вам нужны, они будут обновляться по мере изменения выбора. Когда вы видите в разметке selected="selected" то, что вы видите, это выбранный атрибут. Атрибуты не обновляются при изменении выбора, они существуют в разметке для создания элемента и обычно используются для инициализации свойств элемента.

РЕДАКТИРОВАТЬ: в документации jQuery есть лучшее объяснение, взгляните на раздел «Атрибуты и свойства» здесь.

person Adam Axtmann    schedule 11.01.2016
comment
Вы хотите сказать, что меня не должно волновать добавление или удаление атрибута 'selected=selected' из разметки? Я обновил jsfiddle, чтобы проиллюстрировать, что именно Angular добавляет атрибут, и эта разметка сама по себе не обновляет DOM таким образом. - person paulhhowells; 11.01.2016
comment
@paulhhowells Да, сам атрибут ничего не делает, кроме инициализации свойства. - person Adam Axtmann; 11.01.2016

arrow_upward
1
arrow_downward

Атрибут selected не должен обновляться.

Он используется только для указания того, что option, на котором он находится, должен быть выбран изначально.

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

Поэтому Angular не обновляет DOM, добавляя атрибут «selected» к тегу <option> в ng-options, когда он правильно обновляет модель, потому что это не должно.

person paulhhowells    schedule 11.01.2016