为什么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 < 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"来让它再次工作。

2014-06-20 06:48:23

其他回答

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

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

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

2019-08-30 01:51:09

唯一对我有用的是在ng-options中使用track by，就像这样:

 <select class="dropdown" ng-model="selectedUserTable" ng-options="option.Id as option.Name for option in userTables track by option.Id">

2017-11-19 19:30:51

在这里的众多答案中，我认为我应该转发对我有效的解决方案，并满足以下所有条件:

当ng-model是假的时提供一个占位符/提示符。——select region——" w. value="") 当ng-model值为假值时，用户打开options下拉菜单，则选择占位符(此处提到的其他解决方案使第一个选项显示为选中，这可能会产生误导) 允许用户取消选择有效值，实际上是再次选择假值/默认值

code

<select name="market_vertical" ng-model="vc.viewData.market_vertical"
    ng-options="opt as (opt | capitalizeFirst) for opt in vc.adminData.regions">

    <option ng-selected="true" value="">select a market vertical</option>
</select>

src

独创的q&a - https://stackoverflow.com/a/32880941/1121919

2016-04-27 14:53:49

类似的事情也发生在我身上，这是由升级到angular 1.5引起的。ng-init似乎在Angular的新版本中被解析为类型。在旧的Angular中，ng-init="myModelName=600"会映射到一个值为"600"的选项，即<option value="600"，但在Angular 1.5中，它不会发现这个，因为它似乎期望找到一个值为600的选项，即<option value=600 First</option>。然后Angular会插入一个随机的第一项:

<option value="? number:600 ?"></option>

Angular < 1.2.x

<select ng-model="myModelName" ng-init="myModelName=600">
  <option value="600">First</option>
  <option value="700">Second</option>
</select>

Angular > 1.2

<select ng-model="myModelName" ng-init="myModelName='600'">
  <option value="600">First</option>
  <option value="700">Second</option>
</select>

2016-03-17 14:47:01

我也有同样的问题，我(删除了“ng-model”)改变了这个:

<select ng-model="mapayear" id="mapayear" name="mapayear" style="  display:inline-block !important;  max-width: 20%;" class="form-control">
  <option id="removable" hidden> Selecione u </option>
    <option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>

<select id="mapayear" name="mapayear" style="  display:inline-block !important;  max-width: 20%;" class="form-control">
  <option id="removable" hidden> Selecione u </option>
    <option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>

现在它的工作，但在我的情况下，这是由于我删除范围从ng。控制器，检查你是否没有做同样的事情。

2017-09-13 08:52:02

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

推荐文章

最新文章

标签