Remove Blank option from Select Option with AngularJS

Question

I am new to AngularJS. I searched a lot, but it does not solve my problem.

I am getting a blank option for the first time in select box.

Here is my HTML code

<div ng-app="MyApp1">
    <div ng-controller="MyController">
        <input type="text" ng-model="feed.name" placeholder="Name" />
        <select ng-model="feed.config">
            <option ng-repeat="template in configs">{{template.name}}</option>
        </select>
    </div>
</div>

JS

var MyApp=angular.module('MyApp1',[])
MyApp.controller('MyController', function($scope) {
    $scope.feed = {};

      //Configuration
      $scope.configs = [
                                 {'name': 'Config 1',
                                  'value': 'config1'},
                                 {'name': 'Config 2',
                                  'value': 'config2'},
                                 {'name': 'Config 3',
                                  'value': 'config3'}
                               ];
      //Setting first option as selected in configuration select
      $scope.feed.config = $scope.configs[0].value;
});

But it doesn't seem to work. How can I get this solved? Here is JSFiddle Demo

Community · Accepted Answer · 2020-06-20 09:12:55Z

For reference : Why does angularjs include an empty option in select?

The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options. This happens to prevent accidental model selection: AngularJS can see that the initial model is either undefined or not in the set of options and don't want to decide model value on its own.

In short: the empty option means that no valid model is selected (by valid I mean: from the set of options). You need to select a valid model value to get rid of this empty option.

Change your code like this

var MyApp=angular.module('MyApp1',[])
MyApp.controller('MyController', function($scope) {
  $scope.feed = {};

  //Configuration
  $scope.feed.configs = [
    {'name': 'Config 1',
     'value': 'config1'},
    {'name': 'Config 2',
     'value': 'config2'},
    {'name': 'Config 3',
     'value': 'config3'}
  ];
  //Setting first option as selected in configuration select
  $scope.feed.config = $scope.feed.configs[0].value;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="MyApp1">
  <div ng-controller="MyController">
    <input type="text" ng-model="feed.name" placeholder="Name" />
    <!-- <select ng-model="feed.config">
<option ng-repeat="template in configs">{{template.name}}</option>
</select> -->
    <select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
    </select>
  </div>
</div>

Working JSFiddle Demo

UPDATE (Dec 31, 2015)

If You don't want to set a default value and want to remove blank option,

<select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
      <option value="" selected="selected">Choose</option>
</select>

And in JS no need to initialize value.

~~$scope.feed.config = $scope.feed.configs[0].value;~~

Why is moving configs from $scope to $scope.feed necessary?
So... what does it mean when I do have a valid value and it still gives me a blank line instead of using that option? model - 0, options 0, 50, 100 - select starts on blank line

RedSparkle · Accepted Answer · 2015-06-20 21:32:47Z

While all the suggestions above are working, sometimes I need to have an empty selection (showing placeholder text) when initially enter my screen. So, to prevent select box from adding this empty selection at the beginning (or sometimes at the end) of my list I am using this trick:

HTML Code

<div ng-app="MyApp1">
    <div ng-controller="MyController">
        <input type="text" ng-model="feed.name" placeholder="Name" />
        <select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs" placeholder="Config">
            <option value="" selected hidden />
        </select>
    </div>
</div>

Now you have defined this empty option, so select box is happy, but you keep it hidden.

+1 for the only answer that does not initialize the model to the first option in the list. My weird implementation needed the select list to start blank but not include the blank option when the select list is clicked. This is the only solution that worked for me. Thanks!

Adam Putinski · Accepted Answer · 2013-12-23 07:41:38Z

20

Here is an updated fiddle: http://jsfiddle.net/UKySp/

You needed to set your initial model value to the actual object:

$scope.feed.config = $scope.configs[0];

And update your select to look like this:

<select ng-model="feed.config" ng-options="item.name for item in configs">

answered Dec 23, 2013 at 7:41

Adam Putinski

4572 silver badges9 bronze badges

Comments

Roy M J · Accepted Answer · 2015-11-09 07:25:39Z

14

Another method to resolve is by making use of: $first in ng-repeat

Usage:

<select ng-model="feed.config">
    <option ng-repeat="template in configs" ng-selected="$first">{{template.name}}</option>
</select>

References:

ngSelected : https://docs.angularjs.org/api/ng/directive/ngSelected

$first : https://docs.angularjs.org/api/ng/directive/ngRepeat

Cheers

answered Nov 9, 2015 at 7:25

Roy M J

6,9367 gold badges53 silver badges79 bronze badges

Comments

georgeawg · Accepted Answer · 2018-08-16 12:37:32Z

5

There are multiple ways like -

<select ng-init="feed.config = options[0]" ng-model="feed.config"
        ng-options="template.value as template.name for template in feed.configs">
</select>

Or

$scope.feed.config = $scope.configs[0].name;

edited Aug 16, 2018 at 12:37

georgeawg

49k13 gold badges77 silver badges98 bronze badges

answered Dec 23, 2013 at 7:39

Bhalchandra K

2,6813 gold badges32 silver badges44 bronze badges

Comments

Himanshu Arora · Accepted Answer · 2016-10-25 17:27:28Z

3

It is kind of a workaround but works like a charm. Just add <option value="" style="display: none"></option> as a filler. Like in:

<select size="4" ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
       <option value="" style="display: none"></option>
</select>

answered Oct 25, 2016 at 17:27

Himanshu Arora

2,5983 gold badges24 silver badges35 bronze badges

2 Comments

Rathma Over a year ago

this does not hide the default option in IE I guess

Himanshu Arora Over a year ago

have not specifically tested that in IE

georgeawg · Accepted Answer · 2018-08-16 12:34:19Z

3

If you just want to remove the blank space use ng-show and you are done! No need to initialize value in JS.

<select ng-model="SelectedStatus" ng-options="x.caption for x in statusList">
    <option value="" ng-show="false"></option>
</select>`

edited Aug 16, 2018 at 12:34

georgeawg

49k13 gold badges77 silver badges98 bronze badges

answered Apr 10, 2017 at 10:06

Palash

631 silver badge9 bronze badges

Comments

georgeawg · Accepted Answer · 2018-08-16 12:40:13Z

Change your code like this. You forget about the value inside option. Before you assign the ng-model. It must have a value. Only then it doesn't get the undefined value.

<div ng-app="MyApp1">
<div ng-controller="MyController">
    <input type="text" ng-model="feed.name" placeholder="Name" />
     <select ng-model="feed">
        <option ng-repeat="template in configs" value="template.value">{{template.name}}    
 </option>
    </select>
    </div>
 </div>

JS

 var MyApp=angular.module('MyApp1',[])
 MyApp.controller('MyController',function($scope) {  
      $scope.feed = 'config1';      
      $scope.configs = [
         {'name': 'Config 1', 'value': 'config1'},
         {'name': 'Config 2', 'value': 'config2'},
         {'name': 'Config 3', 'value': 'config3'}
      ];
 });

Farzad.Kamali · Accepted Answer · 2019-03-19 04:44:32Z

1

Use ng-value instead of value.

$scope.allRecs = [{"text":"hello"},{"text":"bye"}];
$scope.X = 0;

and then in html file should be like:

<select ng-model="X">  
     <option ng-repeat="oneRec in allRecs track by $index" ng-value="$index">{{oneRec.text}}</option>
</select>

answered Mar 19, 2019 at 4:44

Farzad.Kamali

5935 silver badges10 bronze badges

Comments

Vladimir Mironov · Accepted Answer · 2019-03-21 15:25:07Z

0

For me the answer to this question was using <option value="" selected hidden /> as it was proposed by @RedSparkle plus adding ng-if="false" to work in IE.

So my full option is (has differences with what I wrote before, but this does not matter because of ng-if):

<option value="" ng-if="false" disabled hidden></option>

answered Mar 21, 2019 at 15:25

Vladimir Mironov

7051 gold badge9 silver badges24 bronze badges

Comments

Kabiraj Kharel · Accepted Answer · 2019-10-24 21:56:41Z

0

Finally it worked for me.

<select ng-init="mybasketModel = basket[0]" ng-model="mybasketModel">
        <option ng-repeat="item in basket" ng-selected="$first">{{item}}</option>
</select>

answered Oct 24, 2019 at 21:56

Kabiraj Kharel

2052 silver badges11 bronze badges

Comments

Deepchand yadav · Accepted Answer · 2016-10-24 06:41:08Z

-1

Also check whether you have any falsy value or not. Angularjs will insert an empty option if you do have falsy value. I struggled for 2 days just due to falsy value. I hope it will be helpful for someone.

I had options as [0, 1] and initially I was set the model to 0 due to that it was inserted empty option. Workaround for this was ["0" , "1"].

answered Oct 24, 2016 at 6:41

Deepchand yadav

12 bronze badges

Collectives™ on Stack Overflow

Remove Blank option from Select Option with AngularJS

12 Answers 12

3 Comments

HTML Code

1 Comment

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

3 Comments

HTML Code

1 Comment

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related