Standard Option verschwindet nach Auswahl nicht leere Option

Question

Ich habe ein einfaches Beispiel für mein Problem JSFiddle.

Am Anfang habe ich leere/Standard-Option, aber wenn ich etwas anderes aus dem Dropdown wählen, verschwindet diese Option.

Wie kann ich diese Option nach der Auswahl verlassen?

<label for="mySelect">Make a choice:</label> 
<select name="mySelect" id="mySelect" 
     ng-options="option.name for option in data.availableOptions" 
     ng-model="data.selectedOption"></select> 

Angular-Controller:

.controller('ExampleController', ['$scope', function($scope) { 
    $scope.data = { 
    availableOptions: [ 
     {id: '1', name: 'Option A'}, 
     {id: '2', name: 'Option B'}, 
     {id: '3', name: 'Option C'} 
    ], 
    selectedOption: {id: '2', name: 'Option B'} //This sets the default value of the select in the ui 
    }; 

Ich habe versucht ng-init zu verwenden Standardoption null zu setzen, sondern diese doen't Arbeit

Answer 1

Bitte leeren Option Element innerhalb select-Element hinzufügen, und prüfen.

<select name="mySelect" id="mySelect" 
    ng-options="option.name for option in data.availableOptions" 
    ng-model="data.selectedOption"> 
    <option></option> 
    </select> 

Answer 2

Mit diesem Ansatz:

HTML

<div ng-app="defaultValueSelect"> 
    <div ng-controller="ExampleController"> 
    <form name="myForm"> 
    <label for="mySelect">Make a choice:</label> 
    <select name="mySelect" id="mySelect" 
     ng-options="option.id as option.name for option in data.availableOptions" 
     ng-model="data.selectedOption"></select> 
    </form> 
    <hr> 
    <tt>option = {{data.selectedOption}}</tt><br/> 
</div> 

AngulerJS

angular.module('defaultValueSelect', []) 
.controller('ExampleController', ['$scope', function($scope) { 
    $scope.data = { 
    availableOptions: [ 
     {id: '1', name: 'Option A'}, 
     {id: '2', name: 'Option B'}, 
     {id: '3', name: 'Option C'} 
    ], 
    selectedOption: '2' //This sets the default value of the select in the ui 
    }; 

}]);