AngularJS - value attribute for select

Question

Source JSON data is         name   Alabama   code   AL        name   Alaska   code   AK        name   American Samoa   code   AS              I try  ng-options  i code as i name for i in regions    but am getting    lt option value     selected  selected  gt  lt  option gt   lt option value  0  gt Alabama lt  option gt   lt option value  1  gt Alaska lt  option gt   lt option value  2  gt American Samoa lt  option gt    while I am expecting to get    lt option value  AL  gt Alabama lt  option gt   lt option value  AK  gt Alaska lt  option gt   lt option value  AS  gt American Samoa lt  option gt    So  how to get value attributes and get rid of     item   By the way  if I set the  scope regions to a static JSON instead of AJAX request s result  the empty item disappears

User · Answer

What you first tried should work  but the HTML is not what we would expect   I added an option to handle the initial  no item selected  case    lt select ng-options  region code as region name for region in regions  ng-model  region  gt      lt option style  display none  value    gt select a region lt  option gt   lt  select gt   lt br gt selected    region     The above generates this HTML    lt select ng-options       ng-model  region  class       gt      lt option style  display none  value class gt select a region lt  option gt      lt option value  0  gt Alabama lt  option gt      lt option value  1  gt Alaska lt  option gt      lt option value  2  gt American Samoa lt  option gt   lt  select gt    Fiddle  Even though Angular uses numeric integers for the value  the model  i e    scope region  will be set to AL  AK  or AS  as desired    The numeric value is used by Angular to lookup the correct array entry when an option is selected from the list    This may be confusing when first learning how Angular implements its  select  directive

User · Answer

You can t really do this unless you build them yourself in an ng-repeat    lt select ng-model  foo  gt      lt option ng-repeat  item in items  value    item code    gt   item name   lt  option gt   lt  select gt    BUT    it s probably not worth it  It s better to leave it function as designed and let Angular handle the inner workings  Angular uses the index this way so you can actually use an entire object as a value  So you can use a drop down binding to select a whole value rather than just a string  which is pretty awesome    lt select ng-model  foo  ng-options  item as item name for item in items  gt  lt  select gt     foo   json

User · Answer

you can use  state name for state in states track by state code   Where states in the JSON array  state is the variable name for each object in the array   Hope this helps

User · Answer

If you use the track by option  the value attribute is correctly written  e g     lt div ng-init  a     label   one   value  15    label   two   value  20    gt       lt select ng-model  foo  ng-options  x for x in a track by x value   gt   lt  div gt    produces    lt select gt       lt option value    selected  selected  gt  lt  option gt       lt option value  15  gt one lt  option gt       lt option value  20  gt two lt  option gt   lt  select gt

User · Answer

If the model specified for the drop down does not exist then angular will generate an empty options element  So you will have to explicitly specify the model on the select like this    lt select ng-model  regions index   ng-options        gt     Refer to the following as it has been answered before    Why does AngularJS include an empty option in select  and this fiddle  Update  Try this instead    lt select ng-model  regions index  code  ng-options  i code as i name for i in regions  gt   lt  select gt   or   lt select ng-model  regions 2   ng-options  r name for r in regions  gt   lt  select gt    Note that there is no empty options element in the select

User · Answer

Try it as below   var scope     this  scope    alert JSON stringify scope model options     selOptions   val    value

User · Answer

You could modify you model to look like this    scope options          AL     Alabama        AK     Alaska        AS     American Samoa         Then use   lt select ng-options  k as v for  k v  in options  gt  lt  select gt

User · Answer

It appears it s not possible to actually use the  value  of a select in any meaningful way as a normal HTML form element and also hook it up to Angular in the approved way with ng-options   As a compromise  I ended up having to put a hidden input alongside my select and have it track the same model as my select  like this  all very much simplified from real production code for brevity    HTML     lt select ng-model  profile  ng-options  o id as o name for o in profiles  name  something i dont care about  gt   lt  select gt   lt input name  profile id  type  text  style  margin-left -10000px   ng-model  profile   gt    Javascript   App controller  ConnectCtrl  function ConnectCtrl  scope     scope profiles     id  xyz   name  a profile    id  abc   name  another profile      scope profile   -1      Then  in my server-side code I just looked for params  profile id   this happened to be a Rails app  but the same principle applies anywhere    Because the hidden input tracks the same model as the select  they stay in sync automagically  no additional javascript necessary    This is the cool part of Angular   It almost makes up for what it does to the value attribute as a side effect   Interestingly  I found this technique only worked with input tags that were not hidden  which is why I had to use the margin-left -10000px  trick to move the input off the page    These two variations did not work    lt input name  profile id  type  text  style  display none   ng-model  profile   gt    and   lt input name  profile id  type  hidden  ng-model  profile   gt    I feel like that must mean I m missing something   It seems too weird for it to be a problem with Angular

[select] AngularJS - value attribute for select

Examples related to select

Examples related to angularjs

Examples related to options