Warum enthält AngularJS eine leere Option in Select?

Question

Ich habe in den letzten Wochen mit AngularJS gearbeitet, und die eine Sache, die mich wirklich stört, ist, dass selbst nach dem Ausprobieren aller Permutationen oder der Konfiguration, die in der Spezifikation unter http://docs.angularjs.org/api/ng.directive:select erhalte ich immer noch eine leere Option als erstes Kind 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' }
];

Zum Schluss sehen Sie den 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 sie loszuwerden?

P.S.: Es geht auch ohne, aber es sieht einfach seltsam aus, wenn man select2 ohne Mehrfachauswahl verwendet.

Answer 1

Die leere option wird erzeugt, wenn ein Wert, auf den durch ng-model nicht in einer Reihe von Optionen vorhanden ist, die an ng-options . Dies geschieht, um eine versehentliche Modellauswahl zu verhindern: AngularJS kann sehen, dass das ursprüngliche Modell entweder nicht definiert ist oder nicht in der Menge der Optionen enthalten ist und will nicht selbst über den Modellwert entscheiden.

Wenn Sie die leere Option loswerden wollen, wählen Sie einfach einen Anfangswert in Ihrem Controller, etwa so:

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

Hier ist das 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 der Menge der Optionen). Sie müssen einen gültigen Modellwert auswählen, um diese leere Option loszuwerden.

Answer 2

Wenn Sie einen Anfangswert wollen, siehe @pkozlowski.opensource Antwort, die FYI kann auch in der Ansicht implementiert werden (anstatt in den Controller) mit 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>

Wenn Sie keinen Anfangswert wünschen, "kann ein einzelnes fest codiertes Element, dessen Wert auf eine leere Zeichenkette gesetzt ist, in das Element verschachtelt werden. Dieses Element steht dann für 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>

Answer 3

Angular < 1.4

Für alle, die "null" als gültigen Wert für eine der Optionen behandeln (stellen Sie sich also vor, dass "null" ein Wert für eines der Elemente in typeOptions im Beispiel unten), habe ich festgestellt, dass der einfachste Weg, um sicherzustellen, dass die automatisch hinzugefügte Option ausgeblendet wird, die Verwendung von ng-if ist.

<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? Denn Sie möchten, dass die CSS-Selektoren, die auf die erste Option innerhalb der obigen Auswahl abzielen würden, auf die "echte" Option abzielen, nicht auf die ausgeblendete. Es wird nützlich, wenn Sie protractor für e2e-Tests verwenden und (aus welchem Grund auch immer) Sie by.css() verwenden, um Optionen auswählen Ziel.

Winkel >= 1,4

Aufgrund der Umstrukturierung der select- und options-Direktiven ist die Verwendung von ng-if ist nicht länger eine praktikable Option, also müssen Sie sich an ng-show="false" um es wieder zum Laufen zu bringen.

Answer 4

Vielleicht nützlich für jemanden:

Wenn Sie einfache Optionen anstelle von ng-options verwenden möchten, können Sie wie unten beschrieben vorgehen:

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

Setzen Sie das Modell inline. Verwenden Sie ng-init, um die leere Option loszuwerden

Answer 5

Etwas Ähnliches ist mir auch passiert und wurde durch ein Upgrade auf Angular 1.5 verursacht. ng-init scheint geparst zu werden für Typ in neueren Versionen von Angular. In älteren Angular ng-init="myModelName=600" würde einer Option mit dem Wert "600" entsprechen, d.h. <option value="600">First</option> aber in Angular 1.5 wird es dies nicht finden, da es anscheinend eine Option mit dem Wert 600 erwartet, d.h. <option value=600>First</option> . Angular würde dann ein zufälliges erstes Element einfügen:

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