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   lt div ng-app  MyApp1  gt       lt div ng-controller  MyController  gt           lt input type  text  ng-model  feed name  placeholder  Name    gt           lt select ng-model  feed config  gt               lt option ng-repeat  template in configs  gt   template name   lt  option gt           lt  select gt       lt  div gt   lt  div gt    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

User · Answer

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>

User · Answer

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     lt div ng-app  MyApp1  gt   lt div ng-controller  MyController  gt       lt input type  text  ng-model  feed name  placeholder  Name    gt        lt select ng-model  feed  gt           lt option ng-repeat  template in configs  value  template value  gt   template name         lt  option gt       lt  select gt       lt  div gt    lt  div gt    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

User · Answer

Another method to resolve is by making use of   first in ng-repeat  Usage     lt select ng-model  feed config  gt       lt option ng-repeat  template in configs  ng-selected   first  gt   template name   lt  option gt   lt  select gt    References   ngSelected   https   docs angularjs org api ng directive ngSelected   first   https   docs angularjs org api ng directive ngRepeat  Cheers

User · Answer

Finally it worked for me    lt select ng-init  mybasketModel   basket 0   ng-model  mybasketModel  gt           lt option ng-repeat  item in basket  ng-selected   first  gt   item   lt  option gt   lt  select gt

User · Answer

There are multiple ways like -    lt select ng-init  feed config   options 0   ng-model  feed config          ng-options  template value as template name for template in feed configs  gt   lt  select gt    Or   scope feed config    scope configs 0  name

User · Answer

If you just want to remove the blank space use ng-show and you are done  No need to initialize value in JS    lt select ng-model  SelectedStatus  ng-options  x caption for x in statusList  gt       lt option value    ng-show  false  gt  lt  option gt   lt  select gt

User · Answer

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   lt div ng-app  MyApp1  gt       lt div ng-controller  MyController  gt           lt input type  text  ng-model  feed name  placeholder  Name    gt           lt select ng-model  feed config  ng-options  template value as template name for template in feed configs  placeholder  Config  gt               lt option value    selected hidden   gt           lt  select gt       lt  div gt   lt  div gt    Now you have defined this empty option  so select box is happy  but you keep it hidden

User · Answer

Use ng-value instead of value    scope allRecs      text   hello     text   bye      scope X   0    and then in html file should be like    lt select ng-model  X  gt          lt option ng-repeat  oneRec in allRecs track by  index  ng-value   index  gt   oneRec text   lt  option gt   lt  select gt

User · Answer

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    lt select ng-model  feed config  ng-options  item name for item in configs  gt

User · Answer

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

User · Answer

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  x000D   x000D  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      x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt   lt div ng-app  MyApp1  gt     lt div ng-controller  MyController  gt       lt input type  text  ng-model  feed name  placeholder  Name    gt       lt  --  lt select ng-model  feed config  gt   lt option ng-repeat  template in configs  gt   template name   lt  option gt   lt  select gt  -- gt       lt select ng-model  feed config  ng-options  template value as template name for template in feed configs  gt       lt  select gt     lt  div gt   lt  div gt  x000D   x000D   x000D   Working JSFiddle Demo UPDATE  Dec 31  2015  If You don t want to set a default value and want to remove blank option   lt select ng-model  quot feed config quot  ng-options  quot template value as template name for template in feed configs quot  gt         lt option value  quot  quot  selected  quot selected quot  gt Choose lt  option gt   lt  select gt   And in JS no need to initialize value   scope feed config    scope feed configs 0  value

User · Answer

It is kind of a workaround but works like a charm  Just add  lt option value    style  display  none  gt  lt  option gt  as a filler  Like in    lt select size  4  ng-model  feed config  ng-options  template value as template name for template in feed configs  gt          lt option value    style  display  none  gt  lt  option gt   lt  select gt

[angularjs] Remove Blank option from Select Option with AngularJS

Examples related to angularjs

Examples related to angularjs-select