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>

控制器到这里

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

Answer 2

我为你制作解决方案。使用ng-option进行角度选择。

Solution

以下是ng-option：

的更多信息

ngOption

Answer 3

选择框中的第一个值始终为空，因为它未定义。选择下拉列表（ng-model="size"）对应于模型的size属性，该属性最初为undefined。将范围中的大小初始化为下面的可能值之一，它将删除未定义的空第一个选项。

$scope.size = 'Medium';

但即使您将尺寸初始化为第二或第三选项，它仍会选择第一个选项，现在您必须使用ng-select来选择正确的值ng-selected="size == sizeoption.id"

完整解决方案here

Angularjs selectedOption无效

3 个答案: