53

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

提前致谢。

4

8 回答 8

130

这将为您完成工作：

<select size="3" ng-model="item" ng-options="s.name for s in itemlist">
    <option value="">Select Option</option>
</select>
于 2013-10-04T15:05:33.760 回答
10

对于将“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() 来定位选择选项时，它会变得很有用。

凯文 - Sưu Tầm

于 2015-04-03T08:35:52.857 回答
2

您可以放弃使用ng-optionsandng-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>
于 2013-10-04T14:19:16.960 回答
1

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

于 2013-10-04T14:02:01.580 回答
1

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

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

$scope.item = 0;
于 2020-02-14T08:24:29.037 回答
1

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

        }
    };
});
于 2016-02-23T23:07:22.323 回答
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>
于 2015-06-02T04:16:48.880 回答
0

控制器

$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>
于 2017-01-12T01:20:39.413 回答