Выбор AngularJS создает параметр со значением "? Object: null?" и не использует пустой параметр по умолчанию при привязке к нулевому значению

Здесь код выглядит как

<select ng-model="nullableInt">
  <option></option>
  <option value="0">First option</option>
  <option value="1">First option</option>
  <option value="2">First option</option>
</select>

Когда nullableInt равно null, сгенерированный html равен

<select ng-model="nullableInt">
  <option></option>
  <option value="? object:null ?"></option>
  <option value="0">First option</option>
  <option value="1">First option</option>
  <option value="2">First option</option>
</select>

Воспроизводится в plunkr здесь: http://plnkr.co/edit/05pBEMJppmkrn3nFgYdk?p=info

Стоит упомянуть, что я стараюсь избегать использования ng-options, кажется, немного переборщить, чтобы создать конечную точку для AngularJS, чтобы потреблять некоторые данные, которые действительно не будут меняться очень часто, если когда-либо.

Ответы

Ответ 1

Обновление 3/29/2017:

Как заявил Хорхе Родригес душ Сантуш, это должно быть обработано по-другому для более новых версий angular. Ниже взята из текущей документации для angular 1.6.3

Необязательно, один жесткий код с установленным значением к пустой строке, может быть вложен в элемент. Эта элемент будет представлять нулевой или "не выбранный" вариант. Видеть пример ниже для демонстрации.

https://docs.angularjs.org/api/ng/directive/select

Angular создает новую опцию для представления нулевого значения. Он не нашел один из вариантов, которые вы предоставили в HTML.

Чтобы привязать к null, установите value = "null" в первом варианте

<option value="null"></option>

http://plnkr.co/edit/kzPVu4hiMcP6wA6crGYt?p=preview

Ответ 2

Принятый ответ не работает для меня, потому что мое свойство может быть пустым, нулевым или undefined. Если вы используете версию 1.3+, вы можете использовать getterSetter, чтобы принудительно использовать значение.

Я имел дело со строковыми значениями. Вам также придется обрабатывать 0 или другие допустимые значения фальши в функции.

$scope.nullableIntCoerced = function(n) {
    return arguments.length ? ($scope.nullableInt = n) : ($scope.nullableInt || "");
}

<select ng-model="nullableIntCoerced" ng-model-options="{getterSetter:true}">
    <option value=""></option>
    ...

https://code.angularjs.org/1.3.20/docs/api/ng/directive/ngModel

Ответ 3

Для более поздних версий Angularjs используйте <option value=""> - </option> для нулевого значения

Ответ 4

Ниже решение решило проблему для меня.

Проблема здесь, когда используется ng-model, добавляется опция по умолчанию со значением "?" и без использования ng-модели нельзя использовать ng-change для получения текущего выбора. Я действительно создал onChangeSelection(), в пределах которого мы можем установить свойство DefaultSelected, подобное ниже

$scope.onChangeSelection = function(id) {

    document.getElementById(id)[0].defaultSelected = true;
    $scope.selected = $('#'+id).val();
}

<select id="mySelect" ng-model="nullableInt" ng-options="option.value as option.text for option in arrayContents track by option.value"                    ng-change="{{onChangeSelection(id)}}" required>
    <option value="" ng-if="false"></option>
</select>

Это исключит параметр по умолчанию из списка опций, а также сделает первое значение по умолчанию выбранным.