Question

我在项目中使用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-model是由选择值设置的。但我希望首先选择始终为空，以便用户可以重置过滤器。

提前致谢。

Answer 1

这将为您完成工作：

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

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和not-hide？因为你想要css选择器将目标定位在上面的第一个选项，选择目标“真实”选项，而不是隐藏的选项。当您使用量角器进行e2e测试时（以及出于何种原因）使用by.css（）来定位选择选项时，它会很有用。

凯文 - SưuTầm

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>

Answer 4

看来您最好的选择是将空白项目作为项目列表中的第一项。

Answer 5

上述解决方案将破坏带有垃圾数据的模型。请使用该指令以正确的方式重置模型 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);

        }
    };
});

Answer 6

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

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

$scope.item = 0;

Answer 7

<强>控制器

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

ng-options如何设置第一个选择始终为空白

8 个答案: