ng-options with simple array init

Question

I m a little bit confused with Angular and ng-options   I have a simple array and I want to init a select with it  But  I want that options value   label   script js   scope options     var1    var2    var3      html   lt select ng-model  myselect  ng-options  o for o in options  gt  lt  select gt    What I get    lt option value  0  gt var1 lt  option gt   lt option value  1  gt var2 lt  option gt   lt option value  2  gt var3 lt  option gt    What I want    lt option value  var1  gt var1 lt  option gt   lt option value  var2  gt var2 lt  option gt   lt option value  var3  gt var3 lt  option gt    So I tried    lt select ng-model  myselect2  ng-init 0 ng-options  options k  as v for  k v  in options  gt  lt  select gt    lt select ng-model  myselect3  ng-init 0 ng-options  b as b for b in options  gt  lt  select gt     But it didn   t work    Edit   My form is submitted externally  which is why I need  var1  as the value instead of 0

User · Answer

you could use something like   lt select ng-model  myselect  gt       lt option ng-repeat  o in options  ng-selected    o  myselect    value    o    gt            o        lt  option gt   lt  select gt    using ng-selected you preselect the option in case myselect was prefilled   I prefer this method over ng-options anyway  as ng-options only works with arrays  ng-repeat also works with json-like objects

User · Answer

lt select ng-model  option  ng-options  o for o in options  gt     scope option will be equal to  var1  after change  even you see value  0  in generated html   plunker

User · Answer

If you setup your select like the following     lt select ng-model  myselect  ng-options  b for b in options track by b  gt  lt  select gt    you will get    lt option value  var1  gt var1 lt  option gt   lt option value  var2  gt var2 lt  option gt   lt option value  var3  gt var3 lt  option gt    working fiddle  http   jsfiddle net x8kCZ 15

User · Answer

You can use ng-repeat with option like this    lt form gt       lt select ng-model  yourSelect           ng-options  option as option for option in   var1    var2    var3            ng-init  yourSelect  var1   gt  lt  select gt       lt input type  hidden  name  yourSelect  value    yourSelect      gt   lt  form gt    When you submit your form you can get value of input hidden     DEMO  ng-selected ng-repeat

User · Answer

You actually had it correct in your third attempt     lt select ng-model  myselect  ng-options  o as o for o in options  gt  lt  select gt    See a working example here  http   plnkr co edit xEERH2zDQ5mPXt9qCl6k p preview  The trick is that AngularJS writes the keys as numbers from 0 to n anyway  and translates back when updating the model   As a result  the HTML will look incorrect but the model will still be set properly when choosing a value   i e  AngularJS will translate  0  back to  var1    The solution by Epokk also works  however if you re loading data asynchronously you might find it doesn t always update correctly  Using ngOptions will correctly refresh when the scope changes

[angularjs] ng-options with simple array init

Examples related to angularjs

Examples related to ng-grid

Examples related to ng-options