如何将第一个选择选项设置为始终为空

How to set the first select option to always be blank

本文关键字：设置 选项 第一个 选择      更新时间：2023-09-26

我在一个项目中使用angularjs，并且在其中使用ng-options来生成

最初，当页面重新加载并且没有选择任何选项元素时，生成的 HTML 如下所示：

<select size="3" ng-model="item" ng-options="s.name for s in itemlist">
<option value="?" selected="selected"></option>
<option value="0">Item 1</option>
<option value="1">Item 2</option>
<option value="2">Item 3</option>
</select>

但是当我选择一个元素（例如第 2 项）时，第一个空白选择就消失了。我知道它发生在 ng 模型由选择值设置时。但是我希望首先选择始终为空，以便用户可以重置过滤器。

这将为您完成工作：

<select size="3" ng-model="item" ng-options="s.name for s in itemlist">
    <option value="">Select Option</option>
</select>

对于将"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 选择器将针对上面的第一个选项，选择以定位"真实"选项，而不是隐藏的选项。当您使用量角器进行 e2e 测试并且（无论出于何种原因）使用 by.css（） 来定位选择选项时，它会很有用。

凯文 - 苏佬

您可以放弃使用ng-options，改用ng-repeat，并将第一个选项设为空白。 请参阅下面的示例。

<select size="3" ng-model="item">
    <option value="?" selected="selected"></option>
    <option ng-repeat="s in itemlist" value="{{s.value}}">{{s.name}}</option>
</select>

看来最好的选择是将空白项目作为项列表中的第一个项包含在内。

上面的解决方案将使用垃圾数据损坏模型。请使用指令以正确的方式重置模型 .JS： 选择选项 

Directive"
 .directive('dropDown', function($filter) {
    return {
        require: 'ngModel',
        priority: 100,
        link: function(scope, element, attr, ngModel) {
            function parse(value) {
                if (value) {
                    if(value === "")
                    {
                        return "crap"
                    }
                    else
                    {
                        return value;
                    }
                } else {
                    return;
                }
            }

            ngModel.$parsers.push(parse);
        }
    };
});

我遇到了同样的问题，经过大量的谷歌搜索，我明白主要问题与我的角度版本有关，如果你使用 Angular 1.6.x，只需使用 ng-value 指令，它将按预期工作。

我还在我的控制器中设置了一个初始值，如下所示：

$scope.item = 0;

        <select ng-model="dataItem.platform_id"
            ng-options="item.id as item.value for item in platformList"
            ng-init="dataItem.platform_id=dataItem.platform_id||platformList[0].id"></select>

控制器 

$scope.item = '';
$scope.itemlist = {
   '' = '',
   'Item 0' = 1,
   'Item 1' = 2,
   'Item 2' = 3
};

.HTML

<select data-ng-model="item" data-ng-options="v as k for (k, v) in itemlist"></select>
相关文章：