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

we should use name value pair binding values into dropdown.see the code for more details

_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 -> Open _x000D_
}

_x000D_

<select ng-model="atcStatusTasks" ng-options="s.name for s in statusTaskList"></select>

_x000D_

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

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

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

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

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

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

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

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

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

Examples related to angularjs