Por que o AngularJS inclui uma opção vazia no select?

Trabalho com o AngularJS há algumas semanas, e o que realmente me incomoda é que, mesmo depois de tentar todas as permutações ou a configuração definida na especificação em http://docs.angularjs.org/api/ng .directive: select , ainda recebo uma opção vazia como o primeiro filho do elemento select.

Aqui está o Jade:

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

Aqui o controlador:

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

Finalmente, aqui está o HTML que é gerado:

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

O que preciso fazer para me livrar dele?

PS: As coisas funcionam sem isso também, mas parece estranho se você usar select2 sem seleção múltipla.

O vazio optioné gerado quando um valor referenciado por ng-modelnão existe em um conjunto de opções passadas para ng-options. Isso acontece para impedir a seleção acidental de modelos: o AngularJS pode ver que o modelo inicial está indefinido ou não está no conjunto de opções e não deseja decidir o valor do modelo por conta própria.

Se você quiser se livrar da opção vazia, basta selecionar um valor inicial no seu controlador, algo como:

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

Aqui está o jsFiddle: http://jsfiddle.net/MTfRD/3/

Em resumo: a opção vazia significa que nenhum modelo válido está selecionado (por válido, quero dizer: no conjunto de opções). Você precisa selecionar um valor de modelo válido para se livrar dessa opção vazia.

Se você deseja um valor inicial, consulte a resposta de @ pkozlowski.opensource, que também pode ser implementada na FYI na exibição (e não no 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>

Se você não deseja um valor inicial, "um único elemento codificado, com o valor definido como uma sequência vazia, pode ser aninhado no elemento. Esse elemento representará a opção nula ou" não selecionada "":

<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 qualquer pessoa que trate "null" como valor válido para uma das opções (imagine que "null" seja um valor de um dos itens em typeOptions no exemplo abaixo), achei a maneira mais simples de garantir que a adição automática fosse feita. opção está oculta é usar ng-if.

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

Por que ng-if e não ng-hide? Como você deseja que os seletores de css que segmentam a primeira opção acima, selecione a opção "real", não a que está oculta. Torna-se útil quando você usa o transferidor para o teste e2e e (por qualquer motivo) usa o by.css () para direcionar as opções selecionadas.

Angular> = 1.4

Devido à refatoração das diretivas de seleção e opções, o uso ng-ifnão é mais uma opção viável, portanto você precisa voltar ng-show="false"a fazê-lo funcionar novamente.

Talvez útil para alguém:

Se você quiser usar opções simples em vez de ng-options, faça o seguinte:

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

Defina o modelo em linha. Use ng-init para se livrar da opção vazia

Algo semelhante estava acontecendo comigo também e foi causado por uma atualização para o angular 1.5. ng-initparece estar sendo analisado para o tipo nas versões mais recentes do Angular. No antigo, o Angular mapeava ng-init="myModelName=600"para uma opção com o valor "600", ou seja, <option value="600">First</option>mas no Angular 1.5, não o encontrará, pois parece estar esperando encontrar uma opção com o valor 600, ou seja <option value=600>First</option>. O Angular insere um primeiro item aleatório:

<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 as inúmeras respostas aqui, imaginei que repassaria a solução que funcionou para mim e atendeu a todas as seguintes condições:

• forneceu um espaço reservado / prompt quando o modelo ng é falso (por exemplo, " --select region-- " w. value="")
• quando o valor do modelo ng é falso e o usuário abre a lista suspensa de opções, o espaço reservado é selecionado (outras soluções mencionadas aqui fazem a primeira opção parecer selecionada, o que pode ser enganoso)
• permite ao usuário desmarcar um valor válido, essencialmente selecionando o valor falso / padrão novamente

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

Perguntas e respostas originais - https://stackoverflow.com/a/32880941/1121919

Uma solução rápida:

select option:empty { display:none }

Espero que ajude alguém. Idealmente, a resposta selecionada deve ser a abordagem, mas se isso não for possível, deve funcionar como um patch.

Sim ng-model criará um valor de opção vazio, quando a propriedade ng-model não estiver definida. Podemos evitar isso, se atribuirmos objeto ao ng-model

Exemplo

codificação 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:

Atribua o objeto da matriz como $ scope.collections [0] ou $ scope.collections [1] ao ng-model, não use propriedades do objeto. se você estiver obtendo o valor da opção de seleção do servidor, usando a função de retorno de chamada, atribua o objeto ao ng-model

NOTA do documento Angular

Nota: ngModel é comparado por referência, não por valor. Isso é importante ao vincular a uma matriz de objetos. veja um exemplo http://jsfiddle.net/qWzTb/

Eu tentei muitas vezes, finalmente encontrei.

Embora as respostas de @ pkozlowski.opensource e de @ Mark estejam corretas, eu gostaria de compartilhar minha versão ligeiramente modificada, onde sempre seleciono o primeiro item da lista, independentemente de seu valor:

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

Estou usando o Angular 1.4x e encontrei este exemplo, então usei o ng-init para definir o valor inicial no select:

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

Eu enfrentei o mesmo problema. Se você estiver postando um formulário angular com postagem normal, enfrentará esse problema, pois o angular não permite definir valores para as opções da maneira que você usou. Se você obtiver o valor de "form.type", encontrará o valor certo. Você precisa postar o objeto angular e não o post do formulário.

Uma solução simples é definir uma opção com um valor em branco ""que achei que elimina a opção indefinida extra.

Ok, na verdade a resposta é bem simples: quando existe uma opção não reconhecida pela Angular, ela inclui uma opaca. O que você está fazendo de errado é que, quando você usa ng-options, ele lê um objeto, digamos[{ id: 10, name: test }, { id: 11, name: test2 }] right?

É isso que o valor do seu modelo precisa para avaliá-lo como igual, digamos que você queira que o valor selecionado seja 10, você precisa definir seu modelo para um valor semelhante { id: 10, name: test }a selecionar 10, portanto, NÃO criará esse lixo.

Espero que ajude todos a entender, tive um tempo difícil tentando :)

Esta solução funciona para mim:

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

Isso funcionou para mim

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

Isso funciona perfeitamente bem

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

da maneira que funciona, isso fornece a primeira opção a ser exibida antes de selecionar algo e a display:noneremove do menu suspenso. Se você quiser, pode fazer

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

e isso fornecerá o select and optionantes de selecionar, mas uma vez selecionado, ele desaparecerá e não será exibido no menu suspenso.

Tente este no seu controlador, na mesma ordem:

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

Aqui está a correção:

para uma amostra de dados como:

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

A opção de seleção deve ser assim: -

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

O ponto é que, quando escrevemos value.listCountcomo value.listName, ele preenche automaticamente o texto, value.listNamemas o valor da opção selecionada évalue.listCount embora os valores my show normal 0,1,2 .. e assim por diante !!!

No meu caso, o financeRef.financeLimitestá realmente pegando o value.listCounte posso fazer minha manipulação dinamicamente no controlador.

Gostaria de acrescentar que, se o valor inicial vier de uma ligação de algum elemento pai ou componente 1.5, verifique se o tipo correto é passado. Se estiver usando@ ligação, a variável passada será string e se as opções forem, por exemplo. inteiros, a opção vazia será exibida.

Analise adequadamente o valor em init ou vincule-o <e não @(menos recomendado para desempenho, a menos que seja necessário).

Solução simples

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

Uma solução de moagem com jQuery quando você não tem o controle das opções

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();
}

Se você usa ng-init, seu modelo para resolver este problema:

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

eu tive o mesmo problema, eu (removido "ng-model") mudei isso:

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

para isso:

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

agora está funcionando, mas no meu caso foi porque eu excluí esse escopo do ng.controller, verifique se você não fez o mesmo.

Oi, eu tinha algumas referências móveis jQUery e eu os removi. Com o jQuery mobile, qualquer uma das correções acima não funcionou para mim. (É ótimo se alguém puder explicar o conflito entre o jQuery Mobile e o Angular JS)

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

A única coisa que funcionou para mim está usando track byem ng-options, como este:

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

Consulte o exemplo da documentação do angularjs como superar esses problemas.

1. Vá para este link da documentação aqui
2. Find ' Binding selecione para um valor não-string via ngModel parsing / formatting '
3. Lá você pode ver lá, a diretiva chamada ' convertToNumber ' resolve o problema.

Funciona para mim. Também pode ver como funciona aqui

Podemos usar CSS para ocultar a primeira opção, mas não funcionará no IE 10, 11. A melhor maneira é remover o elemento usando o Jquery. Esta solução funciona para os principais navegadores testados no chrome e IE10, 11

Além disso, se você estiver usando angular, em algum momento usando setTimeout funcionará

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