ng-model получает неправильное значение из выпадающего списка

Моя ng-модель обновляется первым значением при вводе в раскрывающемся списке, когда некоторые значения SHARE начинают буквы в заголовках.

 <div ng-app="dropDown" ng-controller="dropDownController">
      <select name="StateId" ng-model="selectedState" class="form-control" ng-change="selectedStateChanged()" ng-options="(states.Abbrev + ' - ' + states.Name) for states in states"></select>
      <span>{{selectedState.Name||''}}</span>
    </div>

Plnkr http://plnkr.co/edit/pLVzK18iJxrmrL9Oiw4b?p=preview

Сценарий для тестирования:

  1. Нажмите на любую часть формы.
  2. Нажмите Tab, чтобы сфокусировать раскрывающийся список.
  3. Начните вводить «TX»

Результат: - Опция 'TX - TEXAS' отображается в раскрывающемся списке. - Значение $scope.selectedState IS {Имя: 'TENNESSEE'}

Ожидал:

  • Опция «TX - TEXAS» отображается в раскрывающемся списке.
  • Значение $scope.selectedState должно быть {Name: 'TEXAS'}

Я собираюсь решить это, используя простой javascript, а пока я хотел бы знать, есть ли какое-либо решение AngularJS.

Заранее спасибо.


javascript drop-down-menu angularjs angular-ngmodel
person celerno    schedule 07.10.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

У меня также возникли некоторые проблемы с select. Вот почему всегда безопаснее добавлять пустой тег option!

<div ng-app="dropDown" ng-controller="dropDownController">
  <select name="StateId" ng-model="selectedState" class="form-control" ng-change="selectedStateChanged()" ng-options="(states.Abbrev + ' - ' + states.Name) for states in states">
    <option></option>
  </select>
  <span>{{selectedState.Name||''}}</span>
</div>

Решение: http://plnkr.co/edit/LfS347JM6V7Rv5S6vPkL?p=preview.

документация Angular объясняет проблему:

Если viewValue ngModel не соответствует ни одному из параметров, элемент управления автоматически добавит неизвестный параметр, который затем удалит, когда несоответствие будет устранено.

При желании в элемент может быть вложен один жестко запрограммированный элемент со значением, установленным в виде пустой строки. Затем этот элемент будет представлять нулевой или невыбранный вариант.

person Betty St    schedule 07.10.2015
comment
вы сэкономили мне много времени. благодарю вас. это исправило все странные проблемы. - person celerno; 07.10.2015
comment
Есть ли какое-либо преимущество в использовании этого метода по сравнению с обычным тегом выбора и использованием ng-repeat в теге option? Я делал это раньше, и это, казалось, работало просто отлично. Я работаю в Angular всего около 2 месяцев, поэтому меня заинтриговали различные способы ведения дел. - person ragerory; 07.10.2015
comment
хм, я думаю, что это в основном то же самое, но я всегда использую ng-options - person Betty St; 07.10.2015
comment
@ragerory в синем поле в документе — это объяснение: docs.angularjs.org/api /ng/директива/выбрать - person Betty St; 07.10.2015