How to set the first select option to always be blank

Question

I am using angularjs in a project and in which I am using ng-options for generating <select>.

Initially, when the pages reload and no option element is selected, the HTML generated like below:

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

But when I select an element (ex. Item 2) the first blank select is gone. I know its happening as ng-model is being set by select value. But I want first select always blank so that user can reset the filter.

geniuscarrier · Accepted Answer · 2013-10-04 15:05:33Z

129

This will do the work for you:

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

answered Oct 4, 2013 at 15:05

geniuscarrier

4,2492 gold badges24 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Robin van Baalen Over a year ago

My hero! I've been struggling with ng-options for quite a while now having the exact same problem as @arnold had. This is the only permanent and solid solution. Thank you!

BetaRide Over a year ago

onChange directive is not firing if you select this option.

Sunny Over a year ago

This doesn't work while using the select box as a filter criteria. As when you want to reset the filter, on choosing 'Select Option', it doesn't reset the results.

Kevin Black · Accepted Answer · 2015-04-03 08:35:52Z

For anyone out there that treat "null" as valid value for one of the options (so imagine that "null" is a value of one of the items in typeOptions in example below), I found that simplest way to make sure that automatically added option is hidden is to use ng-if.

<select ng-options="option.value as option.name for option in typeOptions"> <option value="" ng-if="false"></option> </select>

Why ng-if and not ng-hide? Because you want css selectors that would target first option inside above select to target "real" option, not the one that's hidden. It gets useful when you're using protractor for e2e testing and (for whatever reason) you use by.css() to target select options.

Kevin - Sưu Tầm

m.e.conroy · Accepted Answer · 2013-10-04 14:19:16Z

2

You can forgo using the ng-options and use ng-repeat instead and make the first option blank. See example below.

<select size="3" ng-model="item"> <option value="?" selected="selected"></option> <option ng-repeat="s in itemlist" value="{{s.value}}">{{s.name}}</option> </select>

answered Oct 4, 2013 at 14:19

m.e.conroy

3,53828 silver badges28 bronze badges

4 Comments

rushkeldon Over a year ago

ng-options is the 'angular way' for select elements and (once used correctly) adds a lot of facility that ng-repeat doesn't.

m.e.conroy Over a year ago

@rushkeldon : Straight from the AngularJS documentation: "In many cases, ngRepeat can be used on <option> elements instead of ngOptions to achieve a similar result." docs.angularjs.org/api/ng/directive/select

plamut Over a year ago

@m.e.conroy The same link also states (it might have been updated since you initially posted it, though) that ng-options is more efficient - faster and uses less memory, because it doesn't create a new scope for each item in the list.

user2245759 Over a year ago

I know this is old but, it is a valid solution for some scenarios, regardless of the micro-performance optimizations for your page, and doesn't deserve the down vote. The inclusion in the documentation is nod toward that fact and there are still some niche cases where ng-repeat on a select is just more straight forward.

Juliane Holzt · Accepted Answer · 2013-10-04 14:02:01Z

1

It appears that your best option would be to have the blank item included as the first item in itemlist.

answered Oct 4, 2013 at 14:02

Juliane Holzt

2,14515 silver badges14 bronze badges

1 Comment

arnold Over a year ago

that creates two blank select when dom initialize.

user5971409 · Accepted Answer · 2016-02-23 23:07:22Z

The solution above will corrupt the model with junk data. Please use the directive to reset the model in the right way JS: Select Option

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

Mehri Rahnama · Accepted Answer · 2020-02-14 08:24:29Z

I had same problem and after a lot of googling,I understood the main issue was related to my angular version, if you use Angular 1.6.x, just use the ng-value directive and it will work as expected.

also I set an initial value in my controller, like this :

$scope.item = 0;

image72 · Accepted Answer · 2015-06-02 04:16:48Z

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

Mathieu · Accepted Answer · 2017-01-12 10:45:05Z

Controller

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

Collectives™ on Stack Overflow

How to set the first select option to always be blank

8 Answers 8

3 Comments

Comments

4 Comments

1 Comment

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

3 Comments

Comments

4 Comments

1 Comment

Comments

Comments

Comments

Comments

Linked

Related