Исходное значение ng-модели, не заданное в select

У меня есть перечисление (код я с использованием TypeScript):

export enum AddressType
{
    NotSet = 0,

    Home = 1,
    Work = 2,
    Headquarters = 3,

    Custom = -1,
}

Затем в моем контроллере у меня есть поле с именем type, в которое я устанавливаю начальное значение, которое должно быть выбрано в выбранном входе (я установил его в AddressType.Headquarters).

Наконец, в моем HTML я добавляю следующее:

<select ng-model="Ctrl.type" ng-options="addressType for addressType in Ctrl.getAddressTypes()"></select>

Кажется, что все работает отлично, за исключением одного: по какой-то причине Angular не выбирает "3" ( "Штаб-квартира" ) изначально в списке после того, как все привязки были обновлены. Angular создает вместо этого дополнительный параметр:

<option value="?" selected="selected"></option>

По какой-то причине Angular не может определить начальную опцию для выбора в комбо.

Если пользователь выбирает другую опцию в поле со списком, Ctrl.type обновляется правильно, поэтому привязка отлично работает для этой части. В основном моя проблема заключается только в том, что опция, которая должна быть выбрана изначально, не выбрана так, как ожидалось.

Что мне здесь не хватает, что вызывает эту проблему?

Ответы

Ответ 1

Обнаружена проблема:

Массив, возвращаемый Ctrl.getAddressTypes(), был массивом строк:

["0", "1", "2", "3", "1"]

и то, что было сохранено в Ctrl.type, имело номер типа.

AngularJS сравнивает массив, поставляемый с ng-параметрами, с значением, указанным в ng-модели, с помощью оператора '==='. 3 в этом случае не равно "3" - почему он не работает.

Ответ 2

Я часто сталкиваюсь с этим при использовании идентификаторов номеров. Мой путь вокруг этой причуды состоит в том, чтобы добавить ''+, чтобы преобразовать его в тип строки:

<select ng-options="''+u.id as u.name for u in users"

Ответ 3

В функции, если добавленный ниже код добавлен и то же самое вызывается из ng-init, проблема также устраняется. Это решит проблему сравнения строк.

$scope.Ctrl.type = "" + $scope.Ctrl.type + "";

Ответ 4

Случается, потому что вы не инициировали выбранное значение. Попробуйте установить значение init с помощью ng-init:

<select ng-model="Ctrl.type" 
       ng-options="addressType for addressType in Ctrl.getAddressTypes()"
       ng-init="Ctrl.type = ..."
       ></select>

Смотрите это демо Fiddle, где у нас есть 2 комбинации с и без значения init. Вы можете видеть, что один комбинированный HTML выглядит следующим образом:

<select ng-model="selectedItem1"
 ng-options="selectedItem1.name as selectedItem1.name for selectedItem1 in values" class="ng-pristine ng-valid">
   <option value="?" selected="selected"></option>
   <option value="0">General</option>
   <option value="1">Super</option>
   <option value="2">Trial</option>
 </select>

Собственный:

<select ng-model="selectedItem" 
        ng-options="selectedItem.name as selectedItem.name for selectedItem in values" 
        ng-init="selectedItem = values[1].name" class="ng-pristine ng-valid">
   <option value="0">General</option>
   <option value="1" selected="selected">Super</option>
   <option value="2">Trial</option>
</select>