CODEWITHSUNDEEP
javascriptangularjsng-options
arnold
arnold

Reputation: 1712

How to set the first select option to always be blank

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.

Upvotes: 53

Views: 56000

Answers (8)

Mehri Rahnama
Mehri Rahnama

Reputation: 11

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;

Upvotes: 1

Khaled Ebdelli
Khaled Ebdelli

Reputation: 11

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>

Upvotes: 0

user5971409
user5971409

Reputation: 11

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

        }
    };
});

Upvotes: 1

image72
image72

Reputation: 141

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

Upvotes: 0

Kevin Black
Kevin Black

Reputation: 916

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

Upvotes: 10

geniuscarrier
geniuscarrier

Reputation: 4249

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>

Upvotes: 130

m.e.conroy
m.e.conroy

Reputation: 3538

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>

Upvotes: 2

Juliane Holzt
Juliane Holzt

Reputation: 2145

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

Upvotes: 1

Related Questions