为什么AngularJS在select中包含一个空选项?
为什么AngularJS在select中包含一个空选项?
我最近几周一直在使用AngularJS,唯一让我感到困扰的是,即使尝试了在http://docs.angularjs.org/api/ng.directive:select规范中定义的所有配置排列组合,我仍然会得到一个空选项作为select元素的第一个子元素。
这是Jade代码:
select.span9(ng-model='form.type', required, ng-options='option.value as option.name for option in typeOptions');
这是控制器:
$scope.typeOptions = [ { name: 'Feature', value: 'feature' }, { name: 'Bug', value: 'bug' }, { name: 'Enhancement', value: 'enhancement' } ];
最后,这是生成的HTML代码:
我需要做什么才能摆脱它?
附言:如果您不使用多选,那么一切都可以正常工作,但是看起来很奇怪。
\n\n当ng-options指定的选项集中不存在ng-model引用的值时,就会生成空的option
。这是为了防止不小心选中模型:AngularJS可以看到初始模型要么是未定义的,要么不在选项集中,因此不想自己决定模型的值。\n\n如果您想摆脱空选项,只需在控制器中选择一个初始值,例如:
$scope.form.type = $scope.typeOptions[0].value;
\n\n这是jsFiddle的链接:http://jsfiddle.net/MTfRD/3/\n\n简而言之:空选项意味着未选择有效的模型(通过\'有效\',我是指:来自选项集)。您需要选择一个有效的模型值才能摆脱此空选项。