Angularjs selectedOption不能正常工作

我一直在試圖設置選擇框的默認選擇選項，不知道我在哪裏做錯了。這裏是我的htmlAngularjs selectedOption不能正常工作

<span ng-controller="sizeController" style="width:137px; float:left; margin:15px 0 0 10px; "> 
 
    <label for="sizeSelect" style="float:left; color:orange">Size:</label> 
 
    <select name="sizeSelect" id="colorSelect" style="width:90px" ng-model="size" ng-change ="onSizeChange(size)"> 
 
    <option ng-repeat="sizeoption in data.sizeOptions" value="{{sizeoption.id}}">{{sizeoption.name }}</option> 
 
    </select> 
 
</span>

控制器放在這裏

function sizeController($scope, $rootScope) { 
 
$scope.data = { 
 
sizeOptions: [ 
 
    {id: 'Small', name: 'Small'}, 
 
    {id: 'Medium', name: 'Medium'}, 
 
    {id: 'Large', name: 'Large'}, 
 
    {id: 'XLarge', name: 'XLarge'} 
 
], 
 
    selectedOption: {id: 'Small', name: 'Small'} 
 
}; 
 
$scope.onSizeChange = function(size){ 
 
    $rootScope.size = size; 
 
}; 
 
}

默認情況下，第一個值的選擇框總是空空的。不知道爲什麼。在此先感謝

來源

2015-10-29 Muhammad Asif Raza

它是空的，因爲你的NG-模型變量「大小」 didnt存在於控制器和「未定義」是不是在你optionslist所以角增加值=」？」到選項列表（空條目）。要將select設置爲預定義值，您只需將ng-model可變大小設置爲所需的值。 –

請通過自己使用ng-options而不是ng-repeat來幫助自己。

<select name="sizeSelect" 
    id="colorSelect" 
    style="width:90px" 
    ng-model="size" 
    ng-change="onSizeChange(size)" 
    ng-options="sizeoption.id as sizeoption.name for sizeoption in data.sizeOptions"> 
</select>

初始化通過設置模型直接