ng-options如何设置第一个select总是空白的

我在项目中使用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> 

但是,当我select一个元素(例如第2项)时,第一个空白select消失了。 我知道它的发生,因为ng-model是通过select值来设置的。 但是我想先select总是空白,以便用户可以重置filter。

提前致谢。

这将为你做的工作:

 <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? 因为你想在上面select第一个选项的cssselect器select目标“真实”选项,而不是隐藏的选项。 当您使用量angular器进行e2etesting时(以及由于某种原因)您使用by.css()来定位select选项时,它会很有用。

凯文 – SưuTầm

看起来,你最好的select是将空白项目作为itemlist中的第一个项目。

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

上面的解决scheme将使用垃圾数据破坏模型。 请使用该指令以正确的方式重置模型JS:select选项

 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); } }; }); 
  <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>