空のオプションを選択してもデフォルトオプションが消える

Question

私の問題の簡単な例があるJSFiddle。

最初は空の/デフォルトのオプションがありますが、ドロップダウンから何かを選択すると、このオプションは表示されなくなります。

選択後にこのオプションを残すにはどうすればよいですか？

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

角度コントローラ：

.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 
    }; 

私は nullにデフォルトのオプションを設定する ng-initを使用しようとした

が、このdoen't作品

Answer 1

select要素内の空のオプション要素を追加してくださいし、チェック。

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

Answer 2

使用このアプローチ：

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

}]);