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

Question

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

最初，当页面重新加载且没有选定任何选项元素时，生成的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-model被选择的值所设置。但是我希望第一个选择始终为空，以便用户可以重置过滤器。

- arnold

Answer 1

这将替您完成工作：

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

- geniuscarrier

---

我的英雄！我一直在苦苦挣扎ng-options已经有一段时间了，正好遇到了@arnold遇到的完全相同的问题。这是唯一的永久和可靠的解决方案。谢谢！ - Robin van Baalen

谢谢，这让我困扰了一段时间。 - Tyler

如果您选择此选项，则onChange指令不会触发。 - BetaRide

当使用选择框作为筛选条件时，这不起作用。因为当您想要重置筛选器时，在选择“选择选项”时，它不会重置结果。 - Sunny

Answer 2

对于那些将“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选择器能够针对上面的选择框中的第一个选项来定位“真正”的选项，而不是隐藏的那个选项。这在使用Protractor进行端到端测试时非常有用，特别是当你使用by.css()来定位选择框选项时。

Kevin - 收集整理

- Kevin Black

Answer 3

您可以放弃使用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>

- m.e.conroy

---

ng-options是选择元素的“angular方式”，一旦正确使用，它比ng-repeat提供了更多的便利。 - rushkeldon

直接引用AngularJS的文档：“在许多情况下，ngRepeat可以用于<option>元素，而不是使用ngOptions来达到类似的结果。” https://docs.angularjs.org/api/ng/directive/select - m.e.conroy

@m.e.conroy，同样的链接也指出（尽管自您最初发布以来可能已更新），ng-options更高效 - 更快且使用更少的内存，因为它不会为列表中的每个项目创建新作用域。 - plamut

我知道这已经过时了，但在某些情况下它仍是有效的解决方案，无论您的页面是否进行微小性能优化，都不应该被贬低。文档中的包含证明了这一事实，并且仍然有一些特定情况，在这些情况下，在 select 中使用 ng-repeat 更为直接。 - user2245759

Answer 4

上述解决方案会使模型数据混乱。请使用指令以正确的方式重置模型。 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);

        }
    };
});

- user5971409

Answer 5

似乎您最好的选择是将空白项作为itemlist中的第一项。

- Juliane Holzt

---

当DOM初始化时，它会创建两个空白选择框。 - arnold

Answer 6

我曾经遇到同样的问题，在搜索了很多资料后，我明白了主要问题与我的Angular版本有关。如果你使用的是Angular 1.6.x，只需使用ng-value指令即可按预期工作。

同时，我在控制器中设置了一个初始值，像这样：

$scope.item = 0;

- Mehri Rahnama

Answer 7

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

- image72

Answer 8

控制器

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

- Khaled Ebdelli