Warum enthält AngularJS eine leere Option in select?

Ich habe in den letzten Wochen mit AngularJS gearbeitet, und das einzige, was mich wirklich stört, ist, dass ich selbst nach dem Ausprobieren aller Permutationen oder der in der Spezifikation unter http://docs.angularjs.org/api/ng definierten Konfiguration .directive: select , ich erhalte immer noch eine leere Option als erstes untergeordnetes Element des select-Elements.

Hier ist die Jade:

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

Hier der Controller:

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

Schließlich ist hier der HTML-Code, der generiert wird:

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

Was muss ich tun, um es loszuwerden?

PS: Die Dinge funktionieren auch ohne dies, aber es sieht nur seltsam aus, wenn Sie select2 ohne Mehrfachauswahl verwenden.

Das Leerzeichen optionwird generiert, wenn ein Wert, auf den verwiesen wird ng-model, in einer Reihe von Optionen, an die übergeben wird, nicht vorhanden ist ng-options. Dies verhindert eine versehentliche Modellauswahl: AngularJS kann erkennen, dass das ursprüngliche Modell entweder undefiniert ist oder nicht in den Optionen enthalten ist, und möchte den Modellwert nicht selbst bestimmen.

Wenn Sie die leere Option entfernen möchten, wählen Sie einfach einen Anfangswert in Ihrem Controller aus, etwa:

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

Hier ist die jsFiddle: http://jsfiddle.net/MTfRD/3/

Kurz gesagt: Die leere Option bedeutet, dass kein gültiges Modell ausgewählt ist (mit gültig meine ich: aus dem Satz von Optionen). Sie müssen einen gültigen Modellwert auswählen, um diese leere Option zu entfernen.

Wenn Sie einen Anfangswert wünschen, lesen Sie die Antwort von @ pkozlowski.opensource, die zu Ihrer Information auch in der Ansicht (und nicht in der Steuerung) mit ng-init implementiert werden kann:

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

Wenn Sie keinen Anfangswert möchten, kann "ein einzelnes fest codiertes Element, dessen Wert auf eine leere Zeichenfolge festgelegt ist, in das Element verschachtelt werden. Dieses Element repräsentiert dann die Option null oder" nicht ausgewählt "":

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

Winkel <1,4

Für alle da draußen, die "null" als gültigen Wert für eine der Optionen behandeln (stellen Sie sich also vor, dass "null" ein Wert eines der Elemente in typeOptions im folgenden Beispiel ist), habe ich den einfachsten Weg gefunden, um sicherzustellen, dass dieser automatisch hinzugefügt wird Option ist versteckt ist ng-if zu verwenden.

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

Warum ng-if und nicht ng-hide? Da Sie CSS-Selektoren möchten, die auf die erste Option oben abzielen, wählen Sie "echte" Option, nicht die versteckte. Dies ist nützlich, wenn Sie Winkelmesser für e2e-Tests verwenden und (aus welchen Gründen auch immer) by.css () verwenden, um ausgewählte Optionen als Ziel festzulegen.

Winkel> = 1,4

Aufgrund des Refactorings der Direktiven select und options ist die Verwendung ng-ifnicht mehr sinnvoll, sodass Sie sich an wenden müssen ng-show="false", damit es wieder funktioniert.

Vielleicht nützlich für jemanden:

Wenn Sie einfache Optionen anstelle von ng-Optionen verwenden möchten, können Sie Folgendes tun:

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

Stellen Sie das Modell inline ein. Verwenden Sie ng-init, um die leere Option zu entfernen

Ähnliches passierte auch mir und wurde durch ein Upgrade auf Winkel 1.5 verursacht. ng-initscheint in neueren Versionen von Angular nach Typ analysiert zu werden . In älteren Angular ng-init="myModelName=600"würde eine Option mit dem Wert "600" zugeordnet, dh <option value="600">First</option>in Angular 1.5 wird dies nicht gefunden, da zu erwarten scheint, dass eine Option mit dem Wert 600 gefunden wird <option value=600>First</option>. Angular würde dann ein zufälliges erstes Element einfügen:

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

Winkel <1.2.x

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

Winkel> 1,2

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

Unter den zahlreichen Antworten hier dachte ich, ich würde die für mich funktionierende Lösung erneut veröffentlichen und alle folgenden Bedingungen erfüllen:

• einen Platzhalter / eine Eingabeaufforderung bereitgestellt, wenn das ng-Modell falsch ist (z. B. "--select region--" w. value="")
• Wenn der Wert des ng-Modells falsch ist und der Benutzer das Dropdown-Menü "Optionen" öffnet, wird der Platzhalter ausgewählt (bei anderen hier genannten Lösungen wird die erste Option als ausgewählt angezeigt, was irreführend sein kann).
• Ermöglichen Sie dem Benutzer, die Auswahl eines gültigen Werts aufzuheben , indem Sie im Wesentlichen den falschen Wert / Standardwert erneut auswählen

Code

<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

Original-Fragen und Antworten - https://stackoverflow.com/a/32880941/1121919

Eine schnelle Lösung:

select option:empty { display:none }

Hoffe es hilft jemandem. Im Idealfall sollte die ausgewählte Antwort der Ansatz sein. Sollte dies jedoch nicht möglich sein, sollte dies als Patch funktionieren.

Ja, ng-model erstellt einen leeren Optionswert, wenn die Eigenschaft ng-model undefiniert ist. Wir können dies vermeiden, wenn wir dem ng-Modell ein Objekt zuweisen

Beispiel

Winkelcodierung

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

Wichtige Notiz:

Weisen Sie dem ng-Modell ein Array-Objekt wie $ scope.collections [0] oder $ scope.collections [1] zu. Verwenden Sie keine Objekteigenschaften. Wenn Sie mithilfe der Rückruffunktion einen ausgewählten Optionswert vom Server erhalten, weisen Sie dem ng-Modell ein Objekt zu

HINWEIS aus dem Angular-Dokument

Hinweis: ngModel vergleicht nach Referenz und nicht nach Wert. Dies ist wichtig, wenn Sie an ein Array von Objekten binden. siehe ein Beispiel http://jsfiddle.net/qWzTb/

Ich habe es oft versucht, endlich habe ich es gefunden.

Obwohl die Antworten von @ pkozlowski.opensource und @ Mark korrekt sind, möchte ich meine leicht modifizierte Version freigeben, in der ich immer das erste Element in der Liste auswähle, unabhängig von dessen Wert:

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

Ich verwende Angular 1.4x und habe dieses Beispiel gefunden. Daher habe ich ng-init verwendet, um den Anfangswert in der Auswahl festzulegen:

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

Ich stand vor dem gleichen Problem. Wenn Sie ein Winkelformular mit normalem Beitrag veröffentlichen, tritt dieses Problem auf, da Sie mit dem Winkel keine Werte für die Optionen in der von Ihnen verwendeten Weise festlegen können. Wenn Sie den Wert "form.type" erhalten, finden Sie den richtigen Wert. Sie müssen das eckige Objekt selbst posten, nicht den Formularpfosten.

Eine einfache Lösung besteht darin, eine Option mit einem leeren Wert festzulegen. ""Ich habe festgestellt, dass dadurch die zusätzliche undefinierte Option entfällt.

Ok, eigentlich ist die Antwort ganz einfach: Wenn es eine Option gibt, die Angular nicht erkennt, enthält sie eine langweilige. Was Sie falsch machen, ist, wenn Sie ng-options verwenden, liest es beispielsweise ein Objekt[{ id: 10, name: test }, { id: 11, name: test2 }] right?

Dies ist, was Ihr Modellwert sein muss, um ihn als gleich zu bewerten. Angenommen, Sie möchten, dass der ausgewählte Wert 10 ist. Sie müssen Ihr Modell auf einen Wert wie { id: 10, name: test }10 einstellen, daher wird dieser Papierkorb NICHT erstellt.

Hoffe es hilft allen zu verstehen, ich hatte es schwer zu versuchen :)

Diese Lösung funktioniert bei mir:

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

Das hat bei mir funktioniert

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

Das funktioniert einwandfrei

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

Die Art und Weise, wie es funktioniert, ist, dass dies die erste Option darstellt, die angezeigt wird, bevor etwas ausgewählt wird, und display:nonediese aus der Dropdown-Liste entfernt, damit Sie dies tun können, wenn Sie möchten

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

und dies gibt Ihnen das select and optionvor der Auswahl, aber sobald es ausgewählt ist, verschwindet es und es wird nicht in der Dropdown-Liste angezeigt.

Versuchen Sie dies in Ihrem Controller in der gleichen Reihenfolge:

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

Hier ist das Update:

für ein Beispiel Daten wie:

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

Die Auswahloption sollte folgendermaßen aussehen: -

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

Wenn wir value.listCountals schreiben value.listName, wird der Text automatisch ausgefüllt value.listName, der Wert der ausgewählten Option ist jedochvalue.listCount obwohl die Werte my zeigen normal 0,1,2 .. und so weiter !!!

In meinem Fall financeRef.financeLimitgreift der tatsächlich nach dem value.listCountund ich kann meine Manipulation im Controller dynamisch durchführen.

Ich möchte hinzufügen, dass, wenn der Anfangswert von einer Bindung eines übergeordneten Elements oder einer 1.5-Komponente stammt, sicherstellen muss, dass der richtige Typ übergeben wird. Bei Verwendung@ in der Bindung ist die übergebene Variable eine Zeichenfolge, und wenn die Optionen z. Ganzzahlen, dann wird die leere Option angezeigt.

Analysieren Sie den Wert in init entweder richtig oder binden Sie ihn mit <und nicht @(weniger für die Leistung empfohlen, sofern nicht erforderlich).

Einfache Lösung

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

Eine Grind-Lösung mit jQuery, wenn Sie nicht die Kontrolle über die Optionen haben

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

Wenn Sie dieses Modell mit ng-init lösen, um dieses Problem zu lösen:

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

Ich hatte das gleiche Problem, ich (entferntes "ng-Modell") änderte dies:

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

dazu:

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

Jetzt funktioniert es, aber in meinem Fall wurde der Bereich von ng.controller gelöscht. Überprüfen Sie, ob Sie nicht dasselbe getan haben.

Hallo, ich hatte einige mobile jQUery-Referenzen und habe sie entfernt. Mit jQuery Mobile funktionierte eine der oben genannten Korrekturen bei mir nicht. (Es ist großartig, wenn jemand den Konflikt zwischen jQuery Mobile und Angular JS erklären kann.)

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

Das einzige , was für mich gearbeitet wird mit track byin ng-options, wie folgt aus :

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

Lesen Sie das Beispiel aus der AngularJS-Dokumentation, um diese Probleme zu beheben.

1. Gehen Sie zu dieser Dokumentation Link hier
2. Suchen Sie ' Bindungsauswahl über ngModel-Analyse / Formatierung an einen Wert ohne Zeichenfolge '.
3. Dort können Sie sehen, dass die Direktive ' convertToNumber ' das Problem löst.

Für mich geht das. Kann auch sehen, wie es hier funktioniert

Wir können CSS verwenden, um die erste Option auszublenden. In IE 10, 11 funktioniert dies jedoch nicht. Der beste Weg ist, das Element mit Jquery zu entfernen. Diese Lösung funktioniert für große Browser, die in Chrome und IE10, 11 getestet wurden

Auch wenn Sie Angular verwenden, funktioniert die Verwendung von setTimeout manchmal

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