摆脱选择标签中的空白项答案

【问题标题】：Getting rid of the blank item in select tag摆脱选择标签中的空白项
【发布时间】：2015-09-26 21:14:48
【问题描述】：

所以我有以下代码：

<select id="basicInput" ng-model="MyCtrl.value">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

但在控制台中，我发现：

<select id="basicInput" ng-model="MyCtrl.value">
    <option value="? object:null ?"></option>
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

我之前已经看到这个问题得到解决，但我找到的所有答案都与 ng-options 或 ng-repeat 搏斗。这段代码都没有使用，那么为什么我首先会遇到这个问题？更重要的是，如何防止我的页面使用幻像选项加载此标签？和ng-model有关系吗？

编辑：

自从提出这个问题后，我在代码中添加了以下内容：

<select id="basicInput" ng-model="MyCtrl.value">
    <option value="0"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

我还设置了 Myctrl.value = 0。我仍然发现自己遇到了同样的错误。想法？

【问题讨论】：

为什么不在select的ng-change中处理MyCtrl.value？

标签： javascript angularjs html select angular-ngmodel

【解决方案1】：

您必须将 MyCtrl.value 初始化为选项提供的值之一，否则 Angular 将呈现一个空选择，因为所选模型不存在于选项列表中。

在 MyCtrl 中：

$scope.value = 1;

【讨论】：

option中的value是指option的value属性，还是option标签中的html？
选项的值属性。对我来说，您的 MyCtrl.value 似乎不在 [1,2,3] 中，因此 Angular 尝试将所选值设置为不存在的值，从而生成一个空白选择选项。

【解决方案2】：

这个问题之前已经回答过了。请检查此URL。根据他们

当ng-model 引用的值时生成空选项在传递给ng-options 的一组选项中不存在。有时候是这样的防止意外选择模型：AngularJS 可以看到初始模型未定义或不在选项集中，并且不想自己决定模型值。

相反，您可以这样做

<select id="basicInput" ng-model="MyCtrl.value">
  <option value="" ng-if="false"></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

简而言之：空选项意味着没有选择有效的模型（有效的意思是：从选项集中）。您需要选择一个有效的模型值来摆脱这个空选项

【讨论】：

一个好主意，但实际上我确实希望在选项列表中有一个空白选项，以便我可以清除它。