过去几周我一直在使用AngularJS,有一件事真的困扰着我,即使在http://docs.angularjs.org/api/ng.directive:select的规范中尝试了所有的排列或配置,我仍然得到一个空选项作为select元素的第一子元素。

这是玉:

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:

<select ng-model="form.type" required="required" ng-options="option.value as option.name for option in typeOptions" class="span9 ng-pristine ng-invalid ng-invalid-required">
    <option value="?" selected="selected"></option>
    <option value="0">Feature</option>
    <option value="1">Bug</option>
    <option value="2">Enhancement</option>
</select>

我需要做什么才能摆脱它?

附注:没有这个也可以工作,但是如果使用select2而没有多重选择,它看起来很奇怪。


当前回答

这完全没问题

<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value=""></option>
</select>

它的工作方式是,这给了第一个选项显示之前选择的东西和显示:没有删除它从下拉菜单,所以如果你想要,你可以这样做

<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value="">select an option...</option>
</select>

这将在选择之前给你选择和选项,但一旦选择,它就会消失,不会在下拉列表中显示。

其他回答

我们可以使用CSS隐藏第一个选项,但它不会工作在IE 10, 11。最好的方法是使用Jquery删除该元素。此解决方案适用于chrome和IE10,11测试的主要浏览器

如果你使用的是angular,有时候使用setTimeout也可以

$scope.RemoveFirstOptionElement = function (element) {
    setTimeout(function () {
        $(element.children()[0]).remove();
    }, 0);
};

当你无法控制选项时,使用jQuery的刷任务解决方案

html:

<select id="selector" ng-select="selector" data-ng-init=init() >
...
</select>

js:

$scope.init = function () {
    jQuery('#selector option:first').remove();
    $scope.selector=jQuery('#selector option:first').val();
}

下面是解决方案:

对于如下示例数据:

financeRef.pageCount = [{listCount:10,listName:modelStrings.COMMON_TEN_PAGE},    
{listCount:25,listName:modelStrings.COMMON_TWENTYFIVE_PAGE},
{listCount:50,listName:modelStrings.COMMON_FIFTY_PAGE}];

选择选项应该像这样:-

<select ng-model="financeRef.financeLimit" ng-change="financeRef.updateRecords(1)" 
class="perPageCount" ng-show="financeRef.showTable" ng-init="financeRef.financeLimit=10"
ng-options="value.listCount as value.listName for  value in financeRef.pageCount"
></select>

重点是当我们写值的时候。listCount作为值。listName,它自动在value中填充文本。listName,但所选选项的值为value。虽然我的值显示正常的0,1,2 ..等等!!

在我的例子中,是financeRef。financeLimit实际上是在获取值。listCount,我可以动态地在控制器中进行操作。

一个快速的解决方案:

select option:empty { display:none }

希望它能帮助到别人。理想情况下,选择的答案应该是方法,但如果这是不可能的,那么应该作为补丁工作。

好吧,实际上答案很简单:当有一个选项不能被Angular识别时,它就会包含一个无聊的选项。 你做错的是,当你使用ng-options时,它读取一个对象,说[{id: 10,名称:test}, {id: 11,名称:test2}]对吗?

这就是你的模型值需要的值,假设你想要选择的值为10,你需要设置你的模型值为{id: 10, name: test}以选择10,因此它不会创建那个垃圾。

希望这能帮助大家理解,我有一段艰难的时间尝试:)