当 ng-model 为空时，如何从选择中删除空白选项？答案

【问题标题】：How to remove blank option from select when ng-model is empty?当 ng-model 为空时，如何从选择中删除空白选项？
【发布时间】：2017-08-09 12:25:32
【问题描述】：

我有一个场景，我有一个带有刷新按钮和加号按钮的选择下拉菜单。当我单击刷新按钮时，模型设置为空，但是当我单击加号按钮时，下拉菜单显示为空选项。所以，我需要显示不带空选项的下拉列表，其中ng-model 仅为空。

这是我的代码：

<div class="col-xs-6 npd">
    <div ng-if="minAge==null">
        <select ng-options="minAge.val as minAge.txt for minAge in ddloptions" ng-model="minAge" ng-change="ageCheck()">
         </select>
        <p>Select <br><span>Minimum age</span></p>
    </div>
    <div ng-if="minAge!=null">
        <a ng-click="minAgeRmv()"><img src="images/prf-mprmv.png" /></a>
        <p>Minimum age <br><span>{{minAge}}</span></p>
    </div>
</div>

任何帮助将不胜感激。

【问题讨论】：

你能创建一个 plunker
你有<div ng-if="minAge==null">。如果您不想在 minAge == null 时显示 select，则将其更改为 <div ng-if="minAge!=null">。
@Brian 实际上如果我有两个显示两个带有 null 和 !=null 的 div，那么我的问题是当我将模型值设为 null 时，下拉菜单显示为空选项

标签： javascript angularjs

【解决方案1】：

我认为这应该可行。它将过滤掉任何为空的内容（minAge.txt 不为空的所有值）。

<select ng-options="minAge.val as minAge.txt for minAge in ddloptions | filter:{minAge.txt:'!!'}"
        ng-model="minAge" ng-change="ageCheck()">

【讨论】：

【解决方案2】：

如果你想删除空选项，你可以把这个空选项放在 select <option value="" style="display:none;">Select Age ...</option> 中

【讨论】：

【解决方案3】：

使用Array.prototype.filter方法过滤掉任何带有null的属性

ddloptions = ddloptions.filter(function(item) {
    return item.minAge !== null;
});

刷新数据时在控制器中使用它或将其放入Angular Filter

【讨论】：