¿Por qué AngularJS incluye una opción vacía en select?

He estado trabajando con AngularJS durante las últimas semanas, y lo único que realmente me molesta es que incluso después de probar todas las permutaciones o la configuración definida en la especificación en http://docs.angularjs.org/api/ng .directive: select , sigo teniendo una opción vacía como primer elemento secundario del elemento select.

Aquí está el jade:

select.span9(ng-model='form.type', required, ng-options='option.value as option.name for option in typeOptions');

Aquí el controlador:

$scope.typeOptions = [
    { name: 'Feature', value: 'feature' },
    { name: 'Bug', value: 'bug' },
    { name: 'Enhancement', value: 'enhancement' }
];

Finalmente, aquí está el HTML que se genera:

<select ng-model="form.type" required="required" ng-options="option.value as option.name for option in typeOptions" class="span9 ng-pristine ng-invalid ng-invalid-required">
    <option value="?" selected="selected"></option>
    <option value="0">Feature</option>
    <option value="1">Bug</option>
    <option value="2">Enhancement</option>
</select>

¿Qué necesito hacer para deshacerme de él?

PD: Las cosas funcionan sin esto también, pero parece extraño si usas select2 sin selección múltiple.

El vacío optionse genera cuando un valor al que ng-modelhace referencia no existe en un conjunto de opciones pasado a ng-options. Esto sucede para evitar la selección accidental del modelo: AngularJS puede ver que el modelo inicial no está definido o no está en el conjunto de opciones y no quiere decidir el valor del modelo por sí solo.

Si desea deshacerse de la opción vacía, simplemente seleccione un valor inicial en su controlador, algo como:

$scope.form.type = $scope.typeOptions[0].value;

Aquí está el jsFiddle: http://jsfiddle.net/MTfRD/3/

En resumen: la opción vacía significa que no se selecciona ningún modelo válido (por válido quiero decir: del conjunto de opciones). Debe seleccionar un valor de modelo válido para deshacerse de esta opción vacía.

Si desea un valor inicial, consulte la respuesta de @ pkozlowski.opensource, que para su información también se puede implementar en la vista (en lugar de en el controlador) usando ng-init:

<select ng-model="form.type" required="required" ng-init="form.type='bug'"
  ng-options="option.value as option.name for option in typeOptions" >
</select>

Si no desea un valor inicial, "un solo elemento codificado, con el valor establecido en una cadena vacía, puede anidarse en el elemento. Este elemento representará una opción nula o" no seleccionada ":

<select ng-model="form.type" required="required"
  ng-options="option.value as option.name for option in typeOptions" >
    <option style="display:none" value="">select a type</option>
</select>

Angular <1.4

Para cualquiera que trate "nulo" como un valor válido para una de las opciones (así que imagine que "nulo" es un valor de uno de los elementos en typeOptions en el ejemplo a continuación), encontré esa forma más simple de asegurarme de que se agregue automáticamente La opción oculta es usar ng-if.

<select ng-options="option.value as option.name for option in typeOptions">
    <option value="" ng-if="false"></option>
</select>

¿Por qué ng-if y no ng-hide? Debido a que desea que los selectores CSS que apunten a la primera opción dentro de arriba, seleccione la opción "real", no la que está oculta. Se vuelve útil cuando usa transportador para pruebas e2e y (por cualquier razón) usa by.css () para seleccionar opciones de selección.

Angular> = 1.4

Debido a la refactorización de las directivas select y options, el uso ng-ifya no es una opción viable, por lo que debe recurrir para que vuelva a ng-show="false"funcionar.

Quizás útil para alguien:

Si desea utilizar opciones simples en lugar de ng-options, puede hacer lo siguiente:

<select ng-model="sortorder" ng-init="sortorder='publish_date'">
  <option value="publish_date">Ascending</option>
  <option value="-publish_date">Descending</option>
</select>

Establecer el modelo en línea. Use ng-init para deshacerse de la opción vacía

Algo similar me estaba sucediendo a mí también y fue causado por una actualización a angular 1.5. ng-initparece estar siendo analizado por tipo en versiones más nuevas de Angular. En Angular anterior, se asignaría ng-init="myModelName=600"a una opción con el valor "600", es decir, <option value="600">First</option>pero en Angular 1.5 no encontrará esto, ya que parece esperar encontrar una opción con el valor 600, es decir <option value=600>First</option>. Angular luego insertaría un primer elemento aleatorio:

<option value="? number:600 ?"></option>

Angular <1.2.x

<select ng-model="myModelName" ng-init="myModelName=600">
  <option value="600">First</option>
  <option value="700">Second</option>
</select>

Angular> 1.2

<select ng-model="myModelName" ng-init="myModelName='600'">
  <option value="600">First</option>
  <option value="700">Second</option>
</select>

Entre la multitud de respuestas aquí, pensé que volvería a publicar la solución que funcionó para mí y cumplí con todas las siguientes condiciones:

• proporcionó un marcador de posición / solicitud cuando el modelo ng es falso (por ejemplo, "--seleccionar región--" w. value="")
• cuando el valor del modelo ng es falso y el usuario abre el menú desplegable de opciones, se selecciona el marcador de posición (otras soluciones mencionadas aquí hacen que la primera opción aparezca seleccionada, lo que puede ser engañoso)
• Permitir al usuario anular la selección de un valor válido, esencialmente seleccionando nuevamente el valor falso / predeterminado

código

<select name="market_vertical" ng-model="vc.viewData.market_vertical"
    ng-options="opt as (opt | capitalizeFirst) for opt in vc.adminData.regions">

    <option ng-selected="true" value="">select a market vertical</option>
</select>

src

Preguntas y respuestas originales: https://stackoverflow.com/a/32880941/1121919

Una solución rápida:

select option:empty { display:none }

Espero que ayude a alguien. Idealmente, la respuesta seleccionada debería ser el enfoque, pero si eso no es posible, entonces debería funcionar como un parche.

Sí, ng-model creará un valor de opción vacío, cuando la propiedad ng-model no está definida. Podemos evitar esto si asignamos un objeto a ng-model

Ejemplo

codificación angular

$scope.collections = [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement'}
];

$scope.selectedOption = $scope.collections[0];


<select class='form-control' data-ng-model='selectedOption' data-ng-options='item as item.name for item in collections'></select>

Nota IMPORTANTE:

Asigne el objeto de la matriz como $ scope.collections [0] o $ scope.collections [1] a ng-model, no use las propiedades del objeto. si obtiene el valor de opción de selección del servidor, utilizando la función de devolución de llamada, asigne un objeto a ng-model

NOTA del documento angular

Nota: ngModel compara por referencia, no por valor. Esto es importante cuando se vincula a una matriz de objetos. ver un ejemplo http://jsfiddle.net/qWzTb/

Lo he intentado muchas veces, finalmente lo encontré.

Aunque las respuestas de @ pkozlowski.opensource y @ Mark son correctas, me gustaría compartir mi versión ligeramente modificada donde siempre selecciono el primer elemento de la lista, independientemente de su valor:

<select ng-options="option.value as option.name for option in typeOptions" ng-init="form.type=typeOptions[0].value">
</select>

Estoy usando Angular 1.4x y encontré este ejemplo, así que usé ng-init para establecer el valor inicial en la selección:

<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.id for item in items"></select>

Me enfrenté al mismo problema. Si está publicando una forma angular con publicación normal, entonces se enfrentará a este problema, ya que angular no le permite establecer valores para las opciones en la forma en que lo ha utilizado. Si obtiene el valor de "form.type", encontrará el valor correcto. Debe publicar el objeto angular en sí mismo, no el formulario de publicación.

Una solución simple es establecer una opción con un valor en blanco "". Encontré que esto elimina la opción indefinida adicional.

Ok, en realidad la respuesta es muy simple: cuando hay una opción no reconocida por Angular, incluye una aburrida. Lo que estás haciendo mal es que, cuando usas ng-options, lee un objeto, por ejemplo[{ id: 10, name: test }, { id: 11, name: test2 }] right?

Esto es lo que debe ser el valor de su modelo para evaluarlo como igual, digamos que desea que el valor seleccionado sea 10, debe establecer su modelo en un valor como { id: 10, name: test }para seleccionar 10, por lo tanto, NO creará esa basura.

Espero que ayude a todos a entender, me costó mucho intentarlo :)

Esta solución me funciona:

<select ng-model="mymodel">    
   <option ng-value="''" style="display:none;" selected>Country</option>
   <option value="US">USA</option>
</select>

Esto funciono para mi

<select ng-init="basicProfile.casteId" ng-model="basicProfile.casteId" class="form-control">
     <option value="0">Select Caste....</option>
     <option data-ng-repeat="option in formCastes" value="{{option.id}}">{{option.casteName}}</option>
 </select>

Esto funciona perfectamente bien

<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value=""></option>
</select>

la forma en que funciona es que esto le da la primera opción que se mostrará antes de seleccionar algo y lo display:noneelimina del menú desplegable, por lo que si lo desea, puede hacerlo

<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value="">select an option...</option>
</select>

y esto le dará select and optionantes de seleccionar, pero una vez seleccionado, desaparecerá y no aparecerá en el menú desplegable.

Pruebe este en su controlador, en el mismo orden:

$scope.typeOptions = [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement' }
];
$scope.form.type = $scope.typeOptions[0];

Aquí está la solución:

para una muestra de datos como:

financeRef.pageCount = [{listCount:10,listName:modelStrings.COMMON_TEN_PAGE},    
{listCount:25,listName:modelStrings.COMMON_TWENTYFIVE_PAGE},
{listCount:50,listName:modelStrings.COMMON_FIFTY_PAGE}];

La opción de selección debería ser así:

<select ng-model="financeRef.financeLimit" ng-change="financeRef.updateRecords(1)" 
class="perPageCount" ng-show="financeRef.showTable" ng-init="financeRef.financeLimit=10"
ng-options="value.listCount as value.listName for  value in financeRef.pageCount"
></select>

El punto es que cuando escribimos value.listCountcomo value.listName, automáticamente rellena el texto, value.listNamepero el valor de la opción seleccionada es, value.listCountaunque los valores pueden mostrar normal 0,1,2 ... ¡¡¡y así sucesivamente !!!

En mi caso, el financeRef.financeLimitrealmente está agarrando el value.listCounty puedo hacer mi manipulación en el controlador de forma dinámica.

Me gustaría agregar que si el valor inicial proviene de un enlace de algún elemento padre o componente 1.5, asegúrese de que se pase el tipo correcto. Si se usa @en enlace, la variable pasada será string y si las opciones son, por ejemplo. enteros, entonces aparecerá la opción vacía.

Analice correctamente el valor en init, o enlace con <y no @(menos recomendado para el rendimiento a menos que sea necesario).

Solución simple

<select ng-model='form.type' required><options>
<option ng-repeat="tp in typeOptions" ng-selected="    
{{form.type==tp.value?true:false}}" value="{{tp.value}}">{{tp.name}}</option>

Una solución de rutina con jQuery cuando no tienes el control de las opciones

html:

<select id="selector" ng-select="selector" data-ng-init=init() >
...
</select>

js:

$scope.init = function () {
    jQuery('#selector option:first').remove();
    $scope.selector=jQuery('#selector option:first').val();
}

Si usa ng-init su modelo para resolver este problema:

<select ng-model="foo" ng-app ng-init="foo='2'">

tuve el mismo problema, yo (eliminé "ng-model") cambié esto:

<select ng-model="mapayear" id="mapayear" name="mapayear" style="  display:inline-block !important;  max-width: 20%;" class="form-control">
  <option id="removable" hidden> Selecione u </option>
    <option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>

a esto:

<select id="mapayear" name="mapayear" style="  display:inline-block !important;  max-width: 20%;" class="form-control">
  <option id="removable" hidden> Selecione u </option>
    <option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>

ahora funciona, pero en mi caso fue porque eliminé ese alcance de ng.controller, verifique si no hizo lo mismo.

Hola, tenía algunas referencias móviles de jQUery y las eliminé. Con jQuery mobile, ninguna de las soluciones anteriores funcionó para mí. (Es genial si alguien puede explicar el conflicto entre jQuery Mobile y Angular JS)

https://guntucomputerhacks.blogspot.com.au/2017/10/angular-js-drop-down-first-options-vs.html

Lo único que funcionó para mí es usarlo track byde ng-optionsesta manera:

 <select class="dropdown" ng-model="selectedUserTable" ng-options="option.Id as option.Name for option in userTables track by option.Id">

Consulte el ejemplo de la documentación de angularjs sobre cómo superar estos problemas.

1. Ir a este enlace de documentación aquí
2. Encuentre ' Binding select a un valor que no sea de cadena a través de ngModel parsing / formatting '
3. Allí puedes ver, la directiva llamada ' convertToNumber ' resuelve el problema.

Esto funciona para mi. También puede ver cómo funciona aquí

Podemos usar CSS para ocultar la primera opción, pero no funcionará en IE 10, 11. La mejor manera es eliminar el elemento usando Jquery. Esta solución funciona para los principales navegadores probados en Chrome e IE10, 11

Además, si está usando angular, a veces usar setTimeout funciona

$scope.RemoveFirstOptionElement = function (element) {
    setTimeout(function () {
        $(element.children()[0]).remove();
    }, 0);
};