Standard für ng-select funktioniert nicht

Question

Ich habe ein Formular mit einer Auswahl. Ich versuche, einen Standardwert festzulegen, den ich deaktivieren möchte, so dass das Dropdown-Menü "- Status auswählen -" als erste Option anzeigt und den Benutzer zwingt, eine Auswahl zu treffen.

Mein Problem ist, es funktioniert nicht und die Auswahl beginnt immer leer.

Hier ist mein Code:

<select ng-model="contactEditCtrl.addressData.state" style="width: 50%;"> 
     <option ng-disabled="$index === 1" ng-selected="true">--Select State--</option> 
     <option value="{{state.abbreviation}}" ng-repeat="state in contactEditCtrl.states">{{state.name}}</option> 
    </select> 

Answer 1

Die leere Option wird generiert, wenn ein von ng-model referenzierter Wert nicht in einer Reihe von Optionen enthalten ist, die an ng-options übergeben werden. Dies verhindert zufällige Modellauswahl: AngularJS kann sehen, dass das ursprüngliche Modell entweder nicht definiert ist oder nicht in der Menge der Optionen enthalten ist und nicht allein den Modellwert bestimmen möchte.

Kurz gesagt: die leere Option bedeutet, dass kein gültiges Modell ausgewählt ist (mit gültiger Bedeutung: aus der Menge der Optionen). Sie müssen einen gültigen Modellwert auswählen, um diese leere Option zu entfernen.

Entnommen here

Also würde ich es so schreibe vorschlagen.

var app = angular.module('myApp', []); 
 

 
// Register MyController object to this app 
 
app.controller('MyController', function MyController($scope) { 
 
    this.addressData = {state: "--Select State--"}; 
 
    this.states = [{abbreviation: 'a', name:'ant'}, {abbreviation: 'b', name:'asd'}, {abbreviation: 'b', name:'asd2'}] 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<div ng-app='myApp' ng-controller='MyController as contactEditCtrl'> 
 
    <select ng-model="contactEditCtrl.addressData.state" style="width: 50%;"> 
 
     <option value="--Select State--">--Select State--</option> 
 
     <option ng-value="state.abbreviation" ng-repeat="state in contactEditCtrl.states">{{state.name}}</option> 
 
    </select> 
 
</div>

Answer 2

überprüfen diese mit Standard <option> und ng-options:

:

<select ng-model="contactEditCtrl.addressData.state" 
     ng-options="state.name as state.name for state in contactEditCtrl.states" > 
     <option value="" ng-disabled="true">-- select state --</option> 
</select> 

Demo fiddle

Es wird umgewandelt werden