javascript - Angularjs selectedOption 不起作用

Question

我一直在尝试设置选择框的默认选定选项，不知道我哪里做错了。这是我的 html

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

Controller 位于此处

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

默认情况下，选择框中的第一个值始终为空。不知道为什么。提前致谢

Answer 1

请帮自己一个忙，使用 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>

直接设置模型来初始化

$scope.size = "Small";