angularjs - con - select angular 5

Valor inicial del modelo ng no establecido en seleccionar

Question

Tengo una enumeración (codifico usando TypeScript):

export enum AddressType
{
    NotSet = 0,

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

    Custom = -1,
}

Luego, en mi controlador tengo un campo llamado tipo, en el que configuro el valor inicial que se debe seleccionar en la entrada de selección (lo establezco en AddressType.Headquarters).

Finalmente, en mi HTML pongo lo siguiente:

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

Todo parece funcionar bien, excepto una cosa: por alguna razón, Angular no selecciona "3" (Cuartel general) inicialmente en la selección después de que se hayan actualizado todos los enlaces. Angular crea una opción extra como esta en su lugar:

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

Entonces, por alguna razón, Angular no puede calcular la opción inicial para seleccionar en el combo.

Si el usuario selecciona otra opción del cuadro combinado, Ctrl.type se actualiza correctamente para que el enlace funcione bien para esa parte. Básicamente, mi problema es que la opción que debería seleccionarse inicialmente no se selecciona como se esperaba.

¿Qué me estoy perdiendo aquí que está causando ese problema?

Answer 1

A menudo me encuentro con esto cuando uso el número de identificación. Mi forma de evitar este capricho es agregar ''''+ para convertirlo en tipo de cadena:

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

Answer 2

En una función, si se agrega el siguiente código y se llama al mismo desde ng-init, el problema también se resuelve. Esto resolverá el problema de comparación de cadenas.

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

Answer 3

Encontró el problema:

La matriz devuelta por Ctrl.getAddressTypes () era una matriz de cadenas:

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

y lo que estaba almacenado en Ctrl.type era de tipo numérico.

AngularJS compara la matriz suministrada a ng-options con el valor suministrado a ng-model utilizando el operador ''===''. 3 no es igual a "3" en ese caso, por eso no funcionó.

Answer 4

Me pasa porque no has iniciado el valor seleccionado. Trate de establecer el valor de inicio con ng-init :

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

Vea este Fiddle demostración donde tenemos 2 combos con y sin valor de inicio. Puedes ver que un combo HTML parece:

<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>

El apropiado:

<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>