How do I set default value of select box in angularjs

Question

I have a form that is used to edit a object and I can t select a value in the select box   I have a json array which represents the to be edited and look like this           scope item           objectID    76        versionID    0        versionName    CURRENT        objectName    xyz        now I am at the same time populating a select box from another json array that looks like this    scope versions           id    0        description    CURRENT        name    CURRENT                id    114        description    description of Version 2        name    version2                id    126        description    description of Version 3        name    version3                id    149        description    description of Version 4        name    version4        inside my webpage I am creating the select box as follows   Version  lt select ng-model  item versionID  ng-selected  item versionID  ng-options  version name for version in versions  required gt    the select box is populating for me but it should be selecting the  the value that matches the version in item  I have tried both versionID and versionName  I have even tried setting ng-selected  0  and that doesn t even work   I have looked here on SO  the Angularjs site and googled and gone through countless tutorials but still having issues with this  I just can t seem to see what the issue is so any Help greatly appreciated  JSFiddle Added  Added a JsFiddle here

User · Answer

It doesn t set the default value because your model isn t bound to the id or name properties  it s bound to each version object  Try setting the versionID to one of the objects and it should work  ie  scope item versionID    scope versions 2    If you want to set by the id property then you need to add the select as syntax   ng-options  version id as version name for version in versions   http   jsfiddle net LrhAQ 1

User · Answer

As per the docs select  the following piece of code worked for me    lt div ng-controller  ExampleController  gt   lt form name  myForm  gt   lt label for  mySelect  gt Make a choice  lt  label gt   lt select name  mySelect  id  mySelect    ng-options  option name for option in data availableOptions track by     option id    ng-model  data selectedOption  gt  lt  select gt   lt  form gt   lt hr gt   lt tt gt option     data selectedOption   lt  tt gt  lt br  gt   lt  div gt

User · Answer

After searching and trying multiple non working options to get my select default option working  I find a clean solution at  http   www undefinednull com 2014 08 11 a-brief-walk-through-of-the-ng-options-in-angularjs    lt select class  ajg-stereo-fader-input-name ajg-select-left   ng-options  option name for option in selectOptions  ng-model  inputLeft  gt  lt  select gt   lt select class  ajg-stereo-fader-input-name ajg-select-right  ng-options  option name for option in selectOptions  ng-model  inputRight  gt  lt  select gt    scope inputLeft    scope selectOptions 0    scope inputRight   scope selectOptions 1

User · Answer

if you don t even want to initialize ng-model to a static value and each value is DB driven  it can be done in the following way  Angular compares the evaluated value and populates the drop down   Here below modelData unitId is retrieved from DB  and is compared to the list of unit id which is a separate list from db-   x000D   x000D    lt select id  uomList  ng-init  modelData unitId  x000D                           ng-model  modelData unitId  ng-options  unitOfMeasurement id as unitOfMeasurement unitName for unitOfMeasurement in unitOfMeasurements  gt  x000D   x000D   x000D

User · Answer

lt select ng-model  selectedCar   gt  lt option ng-repeat  car in cars    value    car model    gt   car model   lt  option gt  lt  select gt   lt script gt var app   angular module  myApp       app controller  myCtrl   function  scope     scope cars     model    Ford Mustang   color    red     model    Fiat 500   color    white    model    Volvo XC90   color    black      scope selectedCar  scope cars 0  model

User · Answer

You can just append   track by version id   to your ng-options

User · Answer

You can simple 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

[javascript] How do I set default value of select box in angularjs

Examples related to javascript

Examples related to angularjs