Perché AngularJS include un'opzione vuota in select?

Ho lavorato con AngularJS nelle ultime settimane e l'unica cosa che mi dà davvero fastidio è che anche dopo aver provato tutte le permutazioni o la configurazione definita nelle specifiche su http://docs.angularjs.org/api/ng .directive: select , ho ancora un'opzione vuota come primo figlio dell'elemento select.

Ecco la giada:

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

Qui il controller:

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

Infine, ecco l'HTML che viene generato:

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

Cosa devo fare per liberarmene?

PS: Le cose funzionano anche senza questo, ma sembra strano se usi select2 senza selezione multipla.

Il vuoto optionviene generato quando un valore a cui ng-modelfa riferimento non esiste in una serie di opzioni passate ang-options . Ciò accade per impedire la selezione accidentale del modello: AngularJS può vedere che il modello iniziale non è definito o non è nel gruppo di opzioni e non vuole decidere da solo il valore del modello.

Se vuoi sbarazzarti dell'opzione vuota basta selezionare un valore iniziale nel tuo controller, qualcosa del tipo:

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

Ecco il jsFiddle: http://jsfiddle.net/MTfRD/3/

In breve: l'opzione vuota significa che non è stato selezionato alcun modello valido (per valido intendo: dall'insieme di opzioni). È necessario selezionare un valore di modello valido per sbarazzarsi di questa opzione vuota.

Se vuoi un valore iniziale, vedi la risposta di @ pkozlowski.opensource, che FYI può anche essere implementata nella vista (piuttosto che nel controller) 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 non si desidera un valore iniziale, "un singolo elemento hardcoded, con il valore impostato su una stringa vuota, può essere nidificato nell'elemento. Questo elemento rappresenterà quindi l'opzione null o" non selezionata ":

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

Angolare <1.4

Per tutti quelli che trattano "null" come valore valido per una delle opzioni (quindi immagina che "null" sia il valore di uno degli elementi in typeOptions nell'esempio seguente), ho trovato il modo più semplice per assicurarmi che aggiunto automaticamente l'opzione è nascosta è usare ng-if.

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

Perché ng-if e non ng-hide? Perché vuoi che i selettori CSS che scelgano come target la prima opzione in alto sopra scelgano come target l'opzione "reale", non quella nascosta. È utile quando si utilizza il goniometro per i test e2e e (per qualsiasi motivo) si utilizza by.css () per scegliere come target le opzioni.

Angolare> = 1.4

A causa del refactoring delle direttive select e options, l'utilizzo ng-ifnon è più un'opzione praticabile, quindi devi rivolgerti ng-show="false"per farlo funzionare di nuovo.

Forse utile per qualcuno:

Se vuoi usare opzioni semplici invece di ng-options, puoi fare come di seguito:

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

Imposta il modello in linea. Usa ng-init per eliminare l'opzione vuota

Qualcosa di simile stava accadendo anche a me ed è stato causato da un aggiornamento alla versione angolare 1.5. ng-initsembra essere analizzato per il tipo nelle versioni più recenti di Angular. Nella versione precedente, Angular ng-init="myModelName=600"verrebbe mappato su un'opzione con valore "600", ad esempio, <option value="600">First</option>ma in Angular 1.5 non lo troverà in quanto sembra aspettarsi di trovare un'opzione con valore 600 ie <option value=600>First</option>. Angular inserisce quindi un primo elemento casuale:

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

Angolare <1.2.x

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

Angolare> 1.2

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

Tra la moltitudine di risposte qui, ho pensato di ripubblicare la soluzione che ha funzionato per me e ho soddisfatto tutte le seguenti condizioni:

• fornito un segnaposto / prompt quando il modello ng è errato (ad es. "--select region--" w.value="" )
• quando il valore di ng-model è errato e l'utente apre il menu a discesa delle opzioni, il segnaposto viene selezionato (altre soluzioni menzionate qui fanno apparire selezionata la prima opzione che può essere fuorviante)
• consentire all'utente di deselezionare un valore valido, essenzialmente selezionando nuovamente il valore errato / predefinito

codice

<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

Domande e risposte originali - https://stackoverflow.com/a/32880941/1121919

Una soluzione rapida:

select option:empty { display:none }

Spero che aiuti qualcuno. Idealmente, la risposta selezionata dovrebbe essere l'approccio, ma se nel caso ciò non fosse possibile, dovrebbe funzionare come una patch.

Sì ng-model creerà un valore di opzione vuoto, quando la proprietà ng-model non è definita. Possiamo evitarlo, se assegniamo un oggetto a ng-model

Esempio

codifica angolare

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

Assegna l'oggetto dell'array come $ scope.collections [0] o $ scope.collections [1] a ng-model, non usare le proprietà dell'oggetto. se si ottiene il valore dell'opzione di selezione dal server, utilizzando la funzione di richiamata, assegnare l'oggetto a ng-model

NOTA dal documento angolare

Nota: ngModel confronta per riferimento, non per valore. Questo è importante quando si esegue il binding a una matrice di oggetti. vedi un esempio http://jsfiddle.net/qWzTb/

ho provato molte volte finalmente l'ho trovato.

Sebbene le risposte di @ pkozlowski.opensource e @ Mark siano corrette, mi piacerebbe condividere la mia versione leggermente modificata in cui seleziono sempre il primo elemento nell'elenco, indipendentemente dal suo valore:

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

Sto usando Angular 1.4x e ho trovato questo esempio, quindi ho usato ng-init per impostare il valore iniziale nella selezione:

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

Ho affrontato lo stesso problema. Se stai pubblicando una forma angolare con posta normale, dovrai affrontare questo problema, poiché angolare non ti consente di impostare i valori per le opzioni nel modo in cui hai usato. Se ottieni il valore di "form.type", troverai il valore giusto. Devi pubblicare l'oggetto angolare da solo, non il modulo post.

Una soluzione semplice è quella di impostare un'opzione con un valore vuoto che ""ho trovato questo elimina l'opzione extra non definita.

Ok, in realtà la risposta è molto semplice: quando c'è un'opzione non riconosciuta da Angular, ne include una noiosa. Quello che stai facendo di sbagliato è, quando usi ng-options, legge un oggetto, diciamo[{ id: 10, name: test }, { id: 11, name: test2 }] right?

Questo è ciò che deve essere il valore del tuo modello per valutarlo come uguale, ad esempio vuoi che il valore selezionato sia 10, devi impostare il tuo modello su un valore come { id: 10, name: test } selezionare 10, quindi NON creerà quel cestino.

Spero che possa aiutare tutti a capire, ho avuto un brutto momento a provare :)

Questa soluzione funziona per me:

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

Questo ha funzionato per me

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

Funziona perfettamente

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

il modo in cui funziona è che questo dà la prima opzione da visualizzare prima di selezionare qualcosa e lo display:nonerimuove dal menu a discesa, quindi se vuoi puoi farlo

<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 questo ti darà il select and optionprima di selezionare ma una volta selezionato scomparirà e non verrà visualizzato nel menu a discesa.

Prova questo nel tuo controller, nello stesso ordine:

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

Ecco la soluzione:

per un campione di dati come:

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

L'opzione di selezione dovrebbe essere così: -

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

Il punto è che quando scriviamo value.listCountcome value.listName, popola automaticamente il testo value.listNamema il valore dell'opzione selezionata è value.listCountsebbene i valori mostrino normali 0,1,2 .. e così via !!!

Nel mio caso, financeRef.financeLimitsta effettivamente afferrando value.listCounte posso fare la mia manipolazione nel controller in modo dinamico.

Vorrei aggiungere che se il valore iniziale proviene da un'associazione da qualche elemento genitore o componente 1.5, assicurarsi che venga passato il tipo corretto. Se si utilizza @in associazione, la variabile passata sarà stringa e se le opzioni sono ad es. numeri interi quindi verrà visualizzata l'opzione vuota.

Analizzare correttamente il valore in init oppure eseguire il binding con <e non @(meno consigliato per le prestazioni se non necessario).

Soluzione semplice

<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 soluzione grind con jQuery quando non hai il controllo delle opzioni

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 usi ng-init il tuo modello per risolvere questo problema:

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

ho avuto lo stesso problema, ho (rimosso "ng-model") cambiato questo:

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

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

ora funziona, ma nel mio caso è stato causato che ho eliminato quell'ambito da ng.controller, controlla se non hai fatto lo stesso.

Ciao, ho avuto alcuni riferimenti mobili jQUery e li ho rimossi. Con jQuery mobile nessuna delle soluzioni sopra descritte non ha funzionato per me. (È fantastico se qualcuno può spiegare il conflitto tra jQuery Mobile e Angular JS)

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

L'unica cosa che ha funzionato per me è usare track byin ng-options, in questo modo:

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

Fai riferimento all'esempio della documentazione di angularjs su come superare questi problemi.

1. Vai a questo link di documentazione qui
2. Trova " Binding seleziona un valore non stringa tramite analisi / formattazione ngModel "
3. Qui puoi vedere, la direttiva chiamata ' convertToNumber ' risolve il problema.

Per me funziona. Puoi anche vedere come funziona qui

Possiamo usare CSS per nascondere la prima opzione, ma non funzionerà in IE 10, 11. Il modo migliore è rimuovere l'elemento usando Jquery. Questa soluzione funziona per i principali browser testati in Chrome e IE10, 11

Anche se stai usando angolare, a volte usando setTimeout funziona

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