过去几周我一直在使用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而没有多重选择,它看起来很奇怪。


当前回答

参考angularjs文档中的例子如何克服这些问题。

点击这里的文档链接 查找“通过ngModel解析/格式化将select绑定到非字符串值” 你可以看到,指令convertToNumber解决了这个问题。

这对我很管用。也可以看到它是如何工作在这里

其他回答

如果你使用ng-init你的模型来解决这个问题:

<select ng-model="foo" ng-app ng-init="foo='2'">

Angular < 1.4

对于任何将“null”作为其中一个选项的有效值的人(因此,想象“null”是下面示例中的typeOptions中的一个项的值),我发现确保自动添加的选项被隐藏的最简单的方法是使用ng-if。

<select ng-options="option.value as option.name for option in typeOptions">
    <option value="" ng-if="false"></option>
</select>

为什么是ng-if而不是ng-hide?因为你想要css选择器,将目标内的第一个选项上面选择目标“真实”选项,而不是一个隐藏的。当您使用量角器进行端到端测试时,以及(无论出于何种原因)使用by.css()来瞄准选择选项时,它非常有用。

Angular >= 1.4

由于重构了select和options指令,使用ng-if不再是一个可行的选项,所以你必须转向ng-show="false"来让它再次工作。

简单的解决方案

<select ng-model='form.type' required><options>
<option ng-repeat="tp in typeOptions" ng-selected="    
{{form.type==tp.value?true:false}}" value="{{tp.value}}">{{tp.name}}</option>

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

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

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

当ng-model属性未定义时,ng-model将创建空选项值。如果我们将object赋值给ng-model,就可以避免这种情况

例子

角编码

$scope.collections = [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement'}
];

$scope.selectedOption = $scope.collections[0];


<select class='form-control' data-ng-model='selectedOption' data-ng-options='item as item.name for item in collections'></select>

重要提示:

为数组对象赋值,如$scope。集合[0]或$scope。集合[1]到ng-model,不使用对象属性。如果你从服务器获取选择选项值,使用回调函数,将对象分配给ng-model

来自Angular文档的说明

注意:ngModel比较的是引用,而不是值。当绑定到对象数组时,这很重要。参见示例http://jsfiddle.net/qWzTb/

我试了很多次终于找到了。