ng-options 如何设置第一个选择总是空白

Posted 2023-02-23

【中文标题】ng-options 如何设置第一个选择总是空白

【英文标题】：ng-options how to set first select always blank

【发布时间】：2013-10-11 13:18:29

【问题描述】：

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

提前致谢。

【参考方案1】：

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

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

$scope.item = 0;

【参考方案2】：

控制器

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

【参考方案3】：

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

        
    ;
);

【参考方案4】：

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

【参考方案5】：

对于将“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

【参考方案6】：

这将为您完成工作：

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

【讨论】：

我的英雄！我一直在为 ng-options 苦苦挣扎很长一段时间，现在遇到了与@arnold 完全相同的问题。这是唯一永久且牢固的解决方案。谢谢！

谢谢，这让我想了一段时间

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

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

【参考方案7】：

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

【讨论】：

ng-options 是选择元素的“角度方式”，并且（一旦正确使用）增加了很多 ng-repeat 没有的功能。

@rushkeldon ：直接来自 AngularJS 文档：“在许多情况下，可以在 元素上使用 ngRepeat 而不是 ngOptions 来获得类似的结果。” docs.angularjs.org/api/ng/directive/select

@meconroy 相同的链接还指出（虽然它可能在您最初发布它之后已经更新）ng-options 更高效 - 更快并且使用更少的内存，因为它不会创建列表中每个项目的新范围。

我知道这是旧的，但它在某些情况下是一个有效的解决方案，无论您的页面的微观性能优化如何，不值得投反对票。文档中包含的内容是对这一事实的认可，并且仍然存在一些小众案例，其中 ng-repeat 在选择上更直接。

【参考方案8】：

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

【讨论】：

在 dom 初始化时创建两个空白选择。