Setting default value in select drop-down using Angularjs

Question

I have an object as below  I have to display this as a drop-down   var list     id 4 name  abc    id 600 name  def    id 200 name  xyz      In my controller I have a variable that carries a value  This value decided which of the above three items in the array will be selected by default in the drop-down     scope object setDefault   600    When I create a drop-down form item as below    lt select ng-model  object setDefault  ng-options  r name for r in list  gt                     I face two problems    the list is generated as   lt option value  0  gt abc lt  option gt   lt option value  1  gt def lt  option gt   lt option value  2  gt xyz lt  option gt    instead of    lt option value  4  gt abc lt  option gt   lt option value  600  gt def lt  option gt   lt option value  200  gt xyz lt  option gt   No option gets selected by default even though i have ng-model  object setDefault

User · Answer

Problem 1   The generated HTML you re getting is normal  Apparently it s a feature of Angular to be able to use any kind of object as value for a select  Angular does the mapping between the HTML option-value and the value in the ng-model  Also see Umur s comment in this question  How do I set the value property in AngularJS  39  ng-options   Problem 2    Make sure you re using the following ng-options    lt select ng-model  object item  ng-options  item id as item name for item in list    gt    And put this in your controller to select a default value   object item   4

User · Answer

scope item          id    3        name    ALL        scope CategoryLst           id   1   name   MD           id   2   name   CRNA           id   3   name   ALL        lt select ng-model  item id  ng-selected  3  ng-options  i id as i name for i in CategoryLst  gt  lt  select gt

User · Answer

lt select ng-init  somethingHere   options 0   ng-model  somethingHere  ng-options  option name for option in options  gt  lt  select gt    This would get you desired result Dude    Cheers

User · Answer

In View    lt select ng-model  boxmodel  gt  lt option ng-repeat  lst in list  value    lst id    gt   lst name   lt  option gt  lt  select gt    JS   In side controller    scope boxModel   600

User · Answer

Some of the scenarios  object item would not be loaded or will be undefined   Use ng-init   lt select ng-init  object item 2  ng-model  object item  ng-options  item id as item name for item in list

User · Answer

I could help you out with the html    lt option value    gt abc lt  option gt    instead of   lt option value  4  gt abc lt  option gt    to set abc as the default value

User · Answer

You can do it with following code track by     lt select ng-model  modelName  ng-options  data name for data in list track by data id   gt  lt  select gt

User · Answer

This is an old question and you might have got the answer already    My plnkr explains on my approach to accomplish selecting a default dropdown value  Basically  I have a service which would return the dropdown values  hard coded to test   I was not able to select the value by default and almost spend a day and finally figured out that I should have set  scope proofGroupId    47   instead of  scope proofGroupId   47  in the script js file  It was my bad and I did not notice that I was setting an integer 47 instead of the string  47   I retained the plnkr as it is just in case if some one would like to see  Hopefully  this would help some one

User · Answer

we should use name value pair binding values into dropdown see the   code for more details    x000D   x000D  function myCtrl  scope    x000D        scope statusTaskList     x000D            name   Open   value   1     x000D            name   In Progress   value   2     x000D            name   Complete   value   3     x000D            name   Deleted   value   4     x000D         x000D       scope atcStatusTasks    scope statusTaskList 0      0 - gt  Open  x000D    x000D   lt select ng-model  atcStatusTasks  ng-options  s name for s in statusTaskList  gt  lt  select gt  x000D   x000D   x000D

User · Answer

When you use ng-options to populate a select list  it uses the entire object as the selected value  not just the single value you see in the select list  So in your case  you d need to set    scope object setDefault         id 600      name  def       or   scope object setDefault    scope selectItems 1     I also recommend just outputting the value of  scope object setDefault in your template to see what I m talking about getting selected    lt pre gt   object setDefault   lt  pre gt

[angularjs] Setting default value in select drop-down using Angularjs

Examples related to angularjs