multiple - ¿Por qué AngularJS incluye una opción vacía en seleccionar?

select multiple angular js

Question

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 , todavía obtengo una opción vacía como el primer elemento secundario del elemento seleccionado.

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 usa select2 sin selección múltiple.

Answer 1

Algo similar me estaba pasando a mí también y fue causado por una actualización a angular 1.5. ng-init parece estar siendo analizado por tipo en versiones más recientes de Angular. En Angular anterior, ng-init="myModelName=600" se 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 como parece espere encontrar una opción con valor 600, es decir, <option value=600>First</option> . Angular entonces insertaría un primer elemento al azar:

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

Answer 2

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 cuando escribimos value.listCount como value.listName , automáticamente llena el texto en value.listName pero el valor de la opción seleccionada es value.listCount aunque los valores que se muestran son normales 0,1,2 .. y así sucesivamente !!!

En mi caso, el financeRef.financeLimit realidad está agarrando value.listCount y puedo hacer mi manipulación en el controlador de forma dinámica.

Answer 3

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>

Answer 4

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 / aviso cuando el modelo ng es falsy (por ejemplo, "--select region -" w. value="" )
• cuando el valor de ng-model es falsy 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 deseleccionar 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://.com/a/32880941/1121919

Answer 5

Esta solución funciona para mí:

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

Answer 6

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 proporciona la primera opción que se muestra antes de seleccionar algo y la display:none elimina 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á la select and option antes de seleccionar, pero una vez seleccionada, desaparecerá y no aparecerá en el menú desplegable.

Answer 7

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>

Answer 8

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>

Answer 9

Hola, tuve algunas referencias móviles jQUery y los quité. Con jQuery mobile, cualquiera de las soluciones anteriores no 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

Answer 10

La option vacía se genera cuando un valor referenciado por ng-model no existe en un conjunto de opciones pasadas 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 seleccionó ningún modelo válido (me refiero a válido: del conjunto de opciones). Debe seleccionar un valor de modelo válido para deshacerse de esta opción vacía.

Answer 11

Lo único que me funcionó fue usar track by en ng-options , como esto:

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

Answer 12

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 pasa el tipo correcto. Si usa @ en el enlace, la variable pasada será cadena y si las opciones son, por ejemplo. enteros entonces la opción vacía aparecerá.

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

Answer 13

Ok, en realidad la respuesta es muy simple: cuando hay una opción que Angular no reconoce, incluye una opaca. Lo que está haciendo mal es que, cuando usa ng-options, lee un objeto, diga [{ 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 crees esa basura.

Espero que ayude a todos a entender, tuve un tiempo difícil tratando :)

Answer 14

Prueba este en tu 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];

Answer 15

Sí, ng-model creará un valor de opción vacío, cuando la propiedad ng-model no esté definida. Podemos evitar esto, si asignamos 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 está obteniendo el valor de la opción de selección del servidor, usando la función de devolución de llamada, asigne un objeto al modelo ng

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/

He intentado muchas veces, finalmente lo encontré.

Answer 16

Si desea un valor inicial, vea la respuesta de @pkozlowski.opensource, que FYI 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 único elemento codificado de forma rígida, con el valor establecido en una cadena vacía, se puede anidar en el elemento. Este elemento representará una opción" no seleccionada o nula ":

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

Answer 17

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

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

Answer 18

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>

Answer 19

Tal vez sea útil para alguien:

Si desea usar 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. Utilice ng-init para deshacerse de la opción vacía

Answer 20

Tuve el mismo problema, yo (eliminado "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 está funcionando, pero en mi caso fue porque eliminé ese alcance de ng.controller, verifique si u no hizo lo mismo.

Answer 21

Una solución de molienda 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();
}

Answer 22

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 esto no fuera posible, debería funcionar como un parche.

Answer 23

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

Answer 24

Angular <1.4

Para cualquier persona que trate el valor "nulo" como valor válido para una de las opciones (así que imagine que "nulo" es el valor de uno de los elementos en typeOptions en el ejemplo a continuación), encontré la forma más sencilla de asegurarme de que se agregara automáticamente La opción está 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 de css apunten a la primera opción dentro de la opción anterior, seleccione la opción "real", no la que está oculta. Se vuelve útil cuando usa el transportador para las pruebas e2e y (por cualquier razón) usa by.css () para seleccionar las opciones de selección.

Angular> = 1.4

Debido a la refactorización de las directivas de selección y opciones, el uso de ng-if ya no es una opción viable, por lo que debe recurrir a ng-show="false" para que funcione de nuevo.

Answer 25

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 de la forma que ha utilizado. Si obtiene el valor de "form.type", encontrará el valor correcto. Tienes que publicar el objeto angular en sí mismo no la forma de envío.