为什么AngularJS在select中包含一个空选项?

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

当前回答

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

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

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

2016-09-19 20:32:00

其他回答

一个简单的解决方案是设置一个空值的选项“”我发现这消除了额外的未定义选项。

2015-02-26 18:58:03

我也遇到过同样的问题。如果你要用普通的post来发布angular表单，那么你就会面临这个问题，因为angular不允许你像以前那样为选项设置值。如果你得到form的值。输入“然后你会找到正确的值。你必须将angular对象自己发布，而不是form post。

2013-02-03 11:13:23

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

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

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

2019-03-22 07:41:36

一个快速的解决方案:

select option:empty { display:none }

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

2015-02-27 19:41:50

当你无法控制选项时，使用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();
}

2017-04-05 13:23:50

为什么AngularJS在select中包含一个空选项?

推荐文章

最新文章

标签