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

Unter den vielen Antworten, die hier zu finden sind, möchte ich die Lösung, die für mich funktioniert hat und die ich gefunden habe, hier veröffentlichen alle der folgenden Bedingungen:

• sofern ein Platzhalter/Prompt wenn das ng-Modell falsy (z. B. "-- Region auswählen--" w. value="" )
• wenn ng-model Wert ist falsy und der Benutzer öffnet das Options-Dropdown, ist der Platzhalter ausgewählt (andere hier erwähnte Lösungen lassen die erste Option ausgewählt erscheinen, was irreführend sein kann)
• dem Benutzer die Möglichkeit geben, einen gültigen Wert abzuwählen, d. h. die Auswahl des falsy /Standardwert wieder

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 q&a - https://stackoverflow.com/a/32880941/1121919

Answer 2

Eine schnelle Lösung:

select option:empty { display:none }

Ich hoffe, es hilft jemandem. Idealerweise sollte die ausgewählte Antwort der Ansatz sein, aber wenn das nicht möglich ist, dann sollte es als Patch funktionieren.

Answer 3

Ja, ng-model erzeugt einen leeren Optionswert, wenn die ng-model-Eigenschaft undefiniert ist. Wir können dies vermeiden, wenn wir Objekt zu ng-model zuweisen

Beispiel

Angular-Codierung

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

Wichtiger Hinweis:

Assign Objekt des Arrays wie $scope.collections[0] oder $scope.collections[1] zu ng-model, verwenden Sie nicht Objekt-Eigenschaften. wenn Sie sind immer wählen Option Wert vom Server, mit Call-Back-Funktion, weisen Objekt zu ng-model

HINWEIS aus dem Angular-Dokument

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

Ich habe es viele Male versucht, bis ich es endlich gefunden habe.

Answer 4

Obwohl sowohl die Antworten von @pkozlowski.opensource als auch die von @Mark richtig sind, möchte ich meine leicht veränderte Version vorstellen, bei der ich immer das erste Element in der Liste auswähle, unabhängig von seinem Wert:

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

Answer 5

Ich bin mit Angular 1.4x und ich fand dieses Beispiel, so dass ich ng-init verwendet, um den Anfangswert in der Auswahl festgelegt:

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