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

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

angularjs

为什么AngularJS在select中包含一个空选项？,angularjs,Angularjs,在过去的几周里，我一直在与AngularJS合作，有一件事让我非常困扰，那就是即使在尝试了所有的排列或规范中定义的配置之后，我仍然得到一个空选项作为select元素的第一个子元素这是翡翠： select.span9(ng-model='form.type', required, ng-options='option.value as option.name for option in typeOptions'); 这里是控制器： $scope.typeOptions = [ { na

在过去的几周里，我一直在与AngularJS合作，有一件事让我非常困扰，那就是即使在尝试了所有的排列或规范中定义的配置之后，我仍然得到一个空选项作为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而不使用多个选项，则看起来很奇怪。

当传递给

ng options

的一组选项中不存在

ng model

引用的值时，将生成空的

选项。这样做是为了防止意外的模型选择：AngularJS可以看到初始模型未定义或不在选项集中，并且不想自己决定模型值
如果要取消空选项，只需在控制器中选择一个初始值，如：
$scope.form.type = $scope.typeOptions[0].value;

以下是JSFIDLE：
简而言之：空选项意味着没有选择有效的模型（我的意思是：从选项集中）。您需要选择一个有效的模型值来删除此空选项。
如果您想要初始值，请参阅@pkozlowski.opensource的答案，供参考，该答案也可以使用ng init在视图（而不是控制器）中实现：
<select ng-model="form.type" required="required" ng-init="form.type='bug'"
  ng-options="option.value as option.name for option in typeOptions" >
</select>



如果不需要初始值，“可以将一个硬编码元素（其值设置为空字符串）嵌套到元素中。该元素将表示null或“未选择”选项：

选择一种类型


我也面临同样的问题。如果您使用普通post发布角度表单，那么您将面临此问题，因为角度表单不允许您以使用的方式设置选项的值。如果您得到“form.type”的值，那么您将找到正确的值。你必须张贴有角度的物体，而不是形式的帖子。
可能对某些人有用：
如果要使用普通选项而不是ng选项，可以执行以下操作：
<select ng-model="sortorder" ng-init="sortorder='publish_date'">
  <option value="publish_date">Ascending</option>
  <option value="-publish_date">Descending</option>
</select>


提升
下降的

将模型设置为内联。使用ng init删除空选项
尽管@pkozlowski.opensource和@Mark的答案都是正确的，但我想分享我的稍加修改的版本，我总是选择列表中的第一项，而不管它的值是多少：
<select ng-options="option.value as option.name for option in typeOptions" ng-init="form.type=typeOptions[0].value">
</select>

角度<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如果而不是ng隐藏？因为您希望css选择器以上面的第一个选项为目标，选择以“真实”选项为目标，而不是隐藏的选项。当您使用量角器进行e2e测试以及（出于任何原因）使用by.css（）以选择选项为目标时，它非常有用
角度>=1.4
由于select和options指令的重构，如果不再可行，则使用ng，因此您必须转到ng show=“false”
使其再次工作。
在控制器中尝试此选项，顺序相同：
$scope.typeOptions = [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement' }
];
$scope.form.type = $scope.typeOptions[0];

是，当ng模型属性未定义时，ng模型将创建空选项值。若我们将对象分配给ng模型，则可以避免这种情况
范例
角度编码
$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.collections=[
{name:'Feature'，value:'Feature'}，
{name:'Bug'，value:'Bug'}，
{name:'Enhancement'，value:'Enhancement'}
];
$scope.selectedOption=$scope.collections[0]；

重要提示：
将数组的对象，如$scope.collections[0]或$scope.collections[1]分配给ng模型，不要使用对象属性。若要从服务器获取选择选项值，请使用回调函数，将对象分配给ng模型
角形文件中的注释
注：ngModel通过参考进行比较，而不是通过值进行比较。这在绑定到对象数组时很重要。看一个例子
我试了很多次终于找到了它。
以下是修复方法：
对于以下示例数据：
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>



当我们将value.listCount
写为value.listName
时，它会自动填充value.listName
中的文本，但所选选项的值是value.listCount
，尽管我的值显示为正常的0,1,2。。等等
在我的例子中，financeef.financeLimit
实际上正在获取值.listCount
，我可以在控制器中动态地进行操作。
一个简单的解决方案是设置一个带有空白值的选项”
我发现这样可以消除额外的未定义选项。
一个快速解决方案：
select option:empty { display:none }

希望它能帮助别人。理想情况下，选择的答案应该是方法，但如果不可能，则应作为补丁使用。
这对我来说很有效
<select ng-init="basicProfile.casteId" ng-model="basicProfile.casteId" class="form-control">
     <option value="0">Select Caste....</option>
     <option data-ng-repeat="option in formCastes" value="{{option.id}}">{{option.casteName}}</option>
 </select>


选择种姓。。。。
{{option.casteName}
这很好用
<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value=""></option>
</select>

这将在选择之前为您提供选择和选项
，但一旦选择，它将消失，并且不会显示在下拉列表中
 类似的事情也发生在我身上，这是由升级到angular 1.5引起的。ng init
似乎在angular的较新版本中被解析为类型。在较旧的Angularng init=“myModelName=600”
中，它会映射到一个值为“600”的选项，即First
，但在Angular 1.5中，它不会找到这个选项，因为它似乎希望找到一个值为600的选项，即First
。Angular然后将随机插入第一项：
<option value="? number:600 ?"></option>



安格尔
<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>

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

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

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

<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>

<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>

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

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

<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.id for item in items"></select>

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

<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>

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

<select ng-model="mymodel">    
   <option ng-value="''" style="display:none;" selected>Country</option>
   <option value="US">USA</option>
</select>

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