How to have a default option in Angular js select box

Question

I have searched Google and can t find anything on this   I have this code    lt select ng-model  somethingHere           ng-options  option value as option name for option in options   gt  lt  select gt    With some data like this   options         name   Something Cool      value   something-cool-value          name   Something Else      value   something-else-value        And the output is something like this    lt select ng-model  somethingHere            ng-options  option value as option name for option in options           class  ng-pristine ng-valid  gt        lt option value     selected  selected  gt  lt  option gt       lt option value  0  gt Something Cool lt  option gt       lt option value  1  gt Something Else lt  option gt   lt  select gt    How is it possible to set the first option in the data as the default value so you would get a result like this    lt select ng-model  somethingHere       gt       lt option value  0  selected  selected  gt Something Cool lt  option gt       lt option value  1  gt Something Else lt  option gt   lt  select gt

User · Answer

If you want to make sure your  scope somethingHere value doesn t get overwritten when your view initializes  you ll want to coalesce  somethingHere   somethingHere    options 0  value  the value in your ng-init like so    lt select ng-model  somethingHere           ng-init  somethingHere   somethingHere    options 0  value          ng-options  option value as option name for option in options  gt   lt  select gt

User · Answer

My solution to this was use html to hardcode my default option  Like so   In HAML    select  ng-model    gt   province    ng-options    gt   province as province for province in summary provinces    chosen    gt   chosen-select    data-placeholder    gt   BC  amp  ON      option  value   gt       selected   gt   selected       BC  amp amp  ON   In HTML    lt select ng-model  province  ng-options  province as province for province in summary provinces  chosen  chosen-select  data-placeholder  BC  amp  ON  gt     lt option value    selected  selected  gt BC  amp amp  ON lt  option gt   lt  select gt    I want my default option to return all values from my api  that s why I have a blank value  Also excuse my haml  I know this isn t directly an answer to the OP s question  but people find this on Google  Hope this helps someone else

User · Answer

I would set the model in the controller  Then the select will default to that value  Ex   html    lt select ng-options       ng-model  selectedItem  gt    Angular controller  using resource    myResource items function items      scope items items    if items length gt 0         scope selectedItem  items 0     if you want the first  Could be from config whatever

User · Answer

Only one answer by Srivathsa Harish Venkataramana mentioned track by which is indeed a solution for this   Here is an example along with Plunker  link below  of how to use track by in select ng-options    lt select ng-model  selectedCity          ng-options  city as city name for city in cities track by city id  gt     lt option value    gt -- Select City -- lt  option gt   lt  select gt    If selectedCity is defined on angular scope  and it has id property with the same value as any id of any city on the cities list  it ll be auto selected on load      Here is Plunker for this    http   plnkr co edit 1EVs7R20pCffewrG0EmI p preview   See source documentation for more details  https   code angularjs org 1 3 15 docs api ng directive select

User · Answer

Use below code to populate selected option from your model    lt select id  roomForListing  ng-model  selectedRoom roomName   gt    lt option ng-repeat  room in roomList  title    room roomName    ng-selected    room roomName    selectedRoom roomName    value    room roomName    gt   room roomName   lt  option gt    lt  select gt

User · Answer

This working for me  ng-selected  true

User · Answer

Using select with ngOptions and setting a default value   See the ngOptions documentation for more ngOptions usage examples    x000D   x000D  angular module  defaultValueSelect       x000D    controller  ExampleController      scope   function  scope    x000D      scope data     x000D      availableOptions    x000D         id   1   name   Option A    x000D         id   2   name   Option B    x000D         id   3   name   Option C   x000D         x000D      selectedOption   id   2   name   Option B     This sets the default value of the select in the ui x000D         x000D       x000D   lt script src    ajax googleapis com ajax libs angularjs 1 5 0-rc 0 angular min js  gt  lt  script gt  x000D   lt body ng-app  defaultValueSelect  gt  x000D     lt div ng-controller  ExampleController  gt  x000D     lt form name  myForm  gt  x000D       lt label for  mySelect  gt Make a choice  lt  label gt  x000D       lt select name  mySelect  id  mySelect  x000D        ng-options  option name for option in data availableOptions track by option id  x000D        ng-model  data selectedOption  gt  lt  select gt  x000D     lt  form gt  x000D     lt hr gt  x000D     lt tt gt option     data selectedOption   lt  tt gt  lt br  gt  x000D   lt  div gt  x000D   x000D   x000D    plnkr co  Official documentation about HTML SELECT element with angular data-binding   Binding select to a non-string value via ngModel parsing   formatting    x000D   x000D   function angular    x000D     use strict   x000D  angular module  nonStringSelect       x000D     run function  rootScope    x000D       rootScope model     id  2    x000D       x000D     directive  convertToNumber   function     x000D      return   x000D        require   ngModel   x000D        link  function scope  element  attrs  ngModel    x000D          ngModel  parsers push function val    x000D            return parseInt val  10   x000D              x000D          ngModel  formatters push function val    x000D            return      val  x000D              x000D          x000D         x000D        x000D     window angular   x000D   lt script src    ajax googleapis com ajax libs angularjs 1 5 0-rc 1 angular min js  gt  lt  script gt  x000D   lt body ng-app  nonStringSelect  gt  x000D     lt select ng-model  model id  convert-to-number gt  x000D     lt option value  1  gt One lt  option gt  x000D     lt option value  2  gt Two lt  option gt  x000D     lt option value  3  gt Three lt  option gt  x000D   lt  select gt  x000D     model    x000D   lt  body gt  x000D   x000D   x000D    plnkr co  Other example    x000D   x000D  angular module  defaultValueSelect       x000D    controller  ExampleController      scope   function  scope    x000D      scope availableOptions     x000D         name   Apple   value   apple      x000D         name   Banana   value   banana      x000D         name   Kiwi   value   kiwi    x000D        x000D      scope data    selectedOption    scope availableOptions 1  value   x000D       x000D   lt script src    ajax googleapis com ajax libs angularjs 1 5 0-rc 0 angular min js  gt  lt  script gt  x000D   lt body ng-app  defaultValueSelect  gt  x000D     lt div ng-controller  ExampleController  gt  x000D     lt form name  myForm  gt  x000D       lt select ng-model  data selectedOption  required ng-options  option value as option name for option in availableOptions  gt  lt  select gt  x000D     lt  form gt    x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   x000D    jsfiddle

User · Answer

lt  --     Using following solution you can set initial  default value at controller as well as after change option selected value shown as default      -- gt       lt script type  text javascript  gt        function myCtrl  scope                                         scope myModel Initial Default Value    set default value as required                               lt  script gt       lt select ng-model  myModel                   ng-init  myModel  myModel                  ng-options  option value as option name for option in options  gt           lt  select gt

User · Answer

I needed the default    Please Select    to be unselectable   I also needed to be able to conditionally set a default selected option    I achieved this the following simplistic way  JS code         Flip these 2 to test selected default or no default with default    Please Select    text        scope defaultOption   0       scope defaultOption     key   3   value   Option 3       scope options          key   1   value   Option 1          key   2   value   Option 2          key   3   value   Option 3          key   4   value   Option 4        getOptions     function getOptions        if   scope defaultOption    0         scope options selectedOption    scope defaultOption        HTML    lt select name  OptionSelect  id  OptionSelect  ng-model  options selectedOption  ng-options  item value for item in options track by item key  gt   lt option value    disabled selected style  display  none   gt  -- Please Select --  lt  option gt   lt  select gt   lt h1 gt You selected    options selectedOption key   lt  h1 gt             I hope this helps someone else that has similar requirements   The  Please Select  was accomplished through Joffrey Outtier s answer here

User · Answer

You can simply use ng-init like this   lt select ng-init  somethingHere   options 0            ng-model  somethingHere           ng-options  option name for option in options  gt   lt  select gt

User · Answer

In my case  I was need to insert a initial value only to tell to user to select an option  so  I do like the code below    lt select          lt option value    ng-selected  selected  gt Select one option lt  option gt   lt  select gt    When I tryed an option with the value    of an empty string  null  the option was substituted by angular  but  when put an option like that  with null value   the select apear with this option   Sorry by my bad english and I hope that I help in something with this

User · Answer

This worked for me    lt select ng-model  somethingHere  ng-init  somethingHere  Cool   gt       lt option value  Cool  gt Something Cool lt  option gt       lt option value  Else  gt Something Else lt  option gt   lt  select gt

User · Answer

Simply use ng-selected  true  as follows    lt select ng-model  myModel  gt           lt option value  a  ng-selected  true  gt A lt  option gt           lt option value  b  gt B lt  option gt   lt  select gt

User · Answer

Depending on how many options you have  you could put your values in an array and auto-populate your options like this   lt select ng-model  somethingHere values  ng-options  values for values in  5 4 3 2 1   gt      lt option value    gt Pick a Number lt  option gt   lt  select gt

User · Answer

I think  after the inclusion of  track by   you can use it in ng-options to get what you wanted  like the following    lt select ng-model  somethingHere  ng-options  option name for option in options track by option value   gt  lt  select gt    This way of doing it is better because when you want to replace the list of strings with list of objects you will just change this to     lt select ng-model  somethingHere  ng-options  object name for option in options track by object id   gt  lt  select gt    where somethingHere is an object with the properties name and id  of course  Please note   as  is not used in this way of expressing the ng-options  because it will only set the value and you will not be able to change it when you are using track by

User · Answer

In response to Ben Lesh s answer  there should be this line  ng-init  somethingHere   somethingHere    options 0      instead of  ng-init  somethingHere   somethingHere    options 0  value     That is    x000D   x000D   lt select ng-model  somethingHere  x000D          ng-init  somethingHere   somethingHere    options 0   x000D          ng-options  option name for option in options track by option value  gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

The accepted answer use ng-init  but document says to avoid ng-init if possible       The only appropriate use of ngInit is for aliasing special properties   of ngRepeat  as seen in the demo below  Besides this case  you should   use controllers rather than ngInit to initialize values on a scope    You also can use ng-repeat  instead of ng-options for your options  With ng-repeat  you can use ng-selected with ng-repeat special properties  i e   index   odd   even to make this work without any coding     first is one of the ng-repeat special properties      lt select ng-model  foo  gt       lt option ng-selected   first  ng-repeat   id value  in myOptions  value    id    gt          value        lt  option gt     lt  select gt    ---------------------- EDIT ---------------- Although this works  I would prefer  mik-t s answer when you know what value to select  https   stackoverflow com a 29564802 454252  which uses track-by and ng-options without using ng-init or ng-repeat   This answer should only be used when you must select the first item without knowing what value to choose  e g   I am using this for auto completion which requires to choose the FIRST item all the time

User · Answer

I think the easiest way is   ng-selected   first

User · Answer

If you are using ng-options to render you drop down than option having same value as of ng-modal is default selected  Consider the example    lt select ng-options  list key as list name for list in lists track by list id  ng-model  selectedItem  gt    So option having same value of  list key and selectedItem  is default selected

User · Answer

Try this   HTML   lt select      ng-model  selectedOption       ng-options  option name for option in options  gt   lt  select gt    Javascript  function Ctrl  scope         scope options                         name   Something Cool             value   something-cool-value                                  name   Something Else             value   something-else-value                         scope selectedOption    scope options 0       Plunker here   If you really want to set the value that will be bound to the model  then change the ng-options attribute to  ng-options  option value as option name for option in options    and the Javascript to       scope selectedOption    scope options 0  value    Another Plunker here considering the above

User · Answer

In my case since the default varies from case to case in the form  I add a custom attribute in the select tag     lt select setSeletected    data value    gt         lt option value  value1  gt  value1            lt option value  value2  gt  value2                     in the directives I created a script that checks the value and when angular fills it in sets the option with that value to selected     directive  setSelected   function        restrict   A       link   scope  element  attrs        function setSel            test if the value is defined if not try again if so run the command        if  typeof attrs setSelected   undefined                          window setTimeout  function   setSel    300           else           element find   value    attrs setSelected       prop  selected  true                                      setSel          just translated this from coffescript on the fly at least the jist of it is correct if not the hole thing   It s not the simplest way but get it done when the value varies

User · Answer

If you have some thing instead of just init the date part  you can use ng-init   by declare it in your controller  and use it in the top of your HTML  This function will work like a constructor for your controller  and you can initiate your variables there   angular module  myApp         controller  myController      scope     scope    gt        scope allOptions            name   Apple   value   apple             name   Banana   value   banana              scope myInit        gt           scope userSelected    apple           Other initiations can goes here                lt body ng-app  myApp  gt     lt div ng-controller  myController  ng-init  init    gt       lt select ng-model  userSelected  ng-options  option value as option name for option in allOptions  gt  lt  select gt      lt  div gt   lt  body gt

User · Answer

try this in your angular controller      somethingHere    name   Something Cool     You can set a value  but you are using a complex type and the angular will search key value to set in your view   And  if does not work  try this   ng-options  option value as option name for option in options track by option name

[javascript] How to have a default option in Angular.js select box

Examples related to javascript

Examples related to angularjs

Examples related to html-select