How do I set the value property in AngularJS ng-options

Question

Here is what seems to be bothering a lot of people  including me    When using the ng-options directive in AngularJS to fill in the options for a  lt select gt  tag  I cannot figure out how to set the value for an option  The documentation for this is really unclear - at least for a simpleton like me   I can set the text for an option easily like so   ng-options  select p text for p in resultOptions    When resultOptions is for example                    value   1           text    1st                        value   2           text    2nd            It should be  and probably is  the most simple thing to set the option values  but so far I just don t get it

User · Answer

For me the answer by Bruno Gomes is the best answer.

But actually, you need not worry about setting the value property of select options. AngularJS will take care of that. Let me explain in detail.

Please consider this fiddle

angular.module('mySettings', []).controller('appSettingsCtrl', function ($scope) {

    $scope.timeFormatTemplates = [{
        label: "Seconds",
        value: 'ss'
    }, {
        label: "Minutes",
        value: 'mm'
    }, {
        label: "Hours",
        value: 'hh'
    }];


    $scope.inactivity_settings = {
        status: false,
        inactive_time: 60 * 5 * 3, // 15 min (default value), that is, 900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.activity_settings = {
        status: false,
        active_time: 60 * 5 * 3, // 15 min (default value), that is,  900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.changedTimeFormat = function (time_format) {
        'use strict';

        console.log('time changed');
        console.log(time_format);
        var newValue = time_format.value;

        // do your update settings stuffs
    }
});

As you can see in the fiddle output, whatever you choose for select box options, it is your custom value, or the 0, 1, 2 auto generated value by AngularJS, it does not matter in your output unless you are using jQuery or any other library to access the value of that select combo box options and manipulate it accordingly.

User · Answer

A year after the question  I had to find an answer for this question as non of these gave the actual answer  at least to me   You have asked how to select the option  but nobody has said that these two things are NOT the same   If we have an options like this    scope options           label   one   value  1          label   two   value  2          And we try to set a default option like this    scope incorrectlySelected     label   two   value  2      It will NOT work  but if you try to select the option like this    scope correctlySelected    scope options 1     It will WORK   Even though these two objects have the same properties  AngularJS is considering them as DIFFERENT because AngularJS compares by the reference   Take a look at the fiddle http   jsfiddle net qWzTb

User · Answer

How the value attributes gets its value    When using an array as datasource  it will be the index of the array element in each iteration  When using an object as datasource  it will be the property name in each iteration    So in your case it should be   obj      1    1st    2    2nd       lt select ng-options  k as v for  k v  in obj  gt  lt  select gt

User · Answer

For an object    lt select ng-model  mySelect  ng-options  key as value for  key  value  in object  gt  lt  select gt

User · Answer

You can use ng-options to achieve select tag binding to value and display members   While using this data source   countries                                       key   1                    name    UAE                                                     key   2                     name    India                                                      key   3                     name    OMAN                               you can use the below to bind your select tag to value and name    lt select name  text  ng-model  name  ng-options  c key as c name for c in countries  gt  lt  select gt    it works great

User · Answer

Please use track by property which differentiate values and labels in select box   Please try    lt select ng-options  obj text for obj in array track by obj value  gt  lt  select gt    which will assign labels with text and value with value from the array

User · Answer

lt select ng-model  output  gt      lt option ng-repeat   key val  in dictionary  value    key    gt   val   lt  option gt   lt  select gt

User · Answer

It appears that ng-options is complicated  possibly frustrating  to use  but in reality we have an architecture problem   AngularJS serves as an MVC framework for a dynamic HTML JavaScript application  While its  V iew component does offer HTML  templating   its primary purpose is to connect user actions  via a controller  to changes in the model  Therefore the appropriate level of abstraction  from which to work in AngularJS  is that a select element sets a value in the model to a value from a query    How a query row is presented to the user is the  V iew   s concern and ng-options provides the for keyword to dictate what the contents of the option element should be i e  p text for p in resultOptions  How a selected row is presented to the server is the  M odel   s concern  Therefore ng-options provides the as keyword to specify what value is provided to the model as in k as v for  k v  in objects    The correct solution this is problem is then architectural in nature and involves refactoring your HTML so that the  M odel performs server communication when required  instead of the user submitting a form    If an MVC HTML page is unnecessary over-engineering for the problem at hand  then use only the HTML generation portion of AngularJS   s  V iew component  In this case  follow the same pattern that is used for generating elements such as  amp lt li   amp gt  s under  amp lt ul   amp gt  s and place a ng-repeat on an option element    lt select name    value    gt       lt option ng-repeat    value in Model Values    value      value value      gt            value text        lt  option gt   lt  select gt    As kludge  one can always move the name attribute of the select element to a hidden input element    lt select ng-model    selectedValue    ng-options    value text for value in Model Values    gt   lt  select gt   lt input type    hidden    name    value    value      selectedValue        gt

User · Answer

The tutorial ANGULAR JS  NG-SELECT AND NG-OPTIONS helped me solve the problem    lt select id  countryId    class  form-control    data-ng-model  entity countryId    ng-options  value dataValue as value dataText group by value group for value in countries  gt  lt  select gt

User · Answer

See ngOptions      ngOptions optional       comprehension expression       in one of the   following forms       For array data sources    label for value in array   select as label for value in array   label group by group for value in array   select as label group by group for value in array track by trackexpr   For object data sources    label for  key   value  in object   select as label for  key   value  in object   label group by group for  key  value  in object   select as label group by group for  key  value  in object   In your case  it should be  array       value   1   text    1st        value   2   text    2nd        lt select ng-options  obj value as obj text for obj in array  gt  lt  select gt    Update  With the updates on AngularJS  it is now possible to set the actual value for the value attribute of select element with track by expression    lt select ng-options  obj text for obj in array track by obj value  gt   lt  select gt    How to remember this ugly stuff  To all the people who are having hard time to remember this syntax form  I agree this isn t the most easiest or beautiful syntax  This syntax is kind of an extended version of Python s list comprehensions and knowing that helps me to remember the syntax very easily  It s something like this   Python code   my list    x  2 for x in  1  2  3  4  5    gt   1  4  9  16  25     Let people to be a list of person instances my list2    person name for person in people   gt  my list2     Alice    Bob     This is actually the same syntax as the first one listed above  However  in  lt select gt  we usually need to differentiate between the actual value in code and the text shown  the label  in a  lt select gt  element   Like  we need person id in the code  but we don t want to show the id to the user  we want to show its name  Likewise  we re not interested in the person name in the code  There comes the as keyword to label stuff  So it becomes like this   person id as person name for person in people   Or  instead of person id we could need the person instance reference itself  See below   person as person name for person in people   For JavaScript objects  the same method applies as well  Just remember that the items in the object is deconstructed with  key  value  pairs

User · Answer

If you want to change the value of your option elements because the form will eventually be submitted to the server  instead of doing this    lt select name  text  ng-model  text  ng-options  select p text for p in resultOptions  gt  lt  select gt    You can do this    lt select ng-model  text  ng-options  select p text for p in resultOptions  gt  lt  select gt   lt input type  hidden  name  text  value     text       gt    The expected value will then be sent through the form under the correct name

User · Answer

I had this issue too  I wasn t able to set my value in ng-options  Every option that was generated was set with 0  1       n  To make it right  I did something like this in my ng-options  HTML   lt select ng-options  quot room name for room in Rooms track by room price quot  gt       lt option value  quot  quot  gt --Rooms-- lt  option gt   lt  select gt   I use  quot track by quot  to set all my values with room price   This example sucks  because if there were more than one price equal  the code would fail  So BE SURE to have different values   JSON   scope Rooms                   name   SALA01   price  100                  name   SALA02   price  200                  name   SALA03   price  300               I learned it from blog post How to set the initial selected value of a select element using Angular JS ng-options  amp  track by  Watch the video  It s a nice class

User · Answer

You can do this    lt select ng-model  model  gt       lt option value    gt Select lt  option gt       lt option ng-repeat  obj in array  value    obj id    gt   obj name   lt  option gt   lt  select gt    -- UPDATE  After some updates  user frm adiputra s solution is much better  Code   obj      1    1st    2    2nd      lt select ng-options  k as v for  k v  in obj  gt  lt  select gt

User · Answer

I have struggled with this problem for a while today   I read through the AngularJS documentation  this and other posts and a few of blogs they lead to  They all helped me grock the finer details  but in the end this just seems to be a confusing topic   Mainly because of the many syntactical nuances of ng-options   In the end  for me  it came down to less is more   Given a scope configured as follows             Data used to populate the dropdown list          scope list                  FirmnessID  1  Description   Soft   Value  1                         FirmnessID  2  Description   Medium-Soft   Value  2                FirmnessID  3  Description   Medium   Value  3                 FirmnessID  4  Description   Firm   Value  4                     FirmnessID  5  Description   Very Firm   Value  5               A record or row of data that is to be save to our data store            FirmnessID is a foreign key to the list specified above           scope rec                 id   1              FirmnessID   2              This is all I needed to get the desired result            lt select ng-model  rec FirmnessID                  ng-options  g FirmnessID as g Description for g in list  gt               lt option gt  lt  option gt           lt  select gt       Notice I did not use track by   Using track by the selected item would alway return the object that matched the FirmnessID  rather than the FirmnessID itself  This now meets my criteria  which is that it should return a numeric value rather than the object  and to use ng-options to gain the performance improvement it provides by not creating a new scope for each option generated   Also  I needed the blank first row  so I simply added an  lt option gt  to the  lt select gt  element   Here is a Plunkr that shows my work

User · Answer

Like many said before  if I have data something like this   countries                                       key   1                    name    UAE                                                     key   2                     name    India                                                      key   3                     name    OMAN                               I would use it like    lt select     ng-model  selectedCountry      ng-options  obj name for obj  in countries  gt   lt  select gt    In your Controller you need to set an initial value to get rid of the first empty item     scope selectedCountry    scope countries 0        You need to watch changes to get selected value   scope  watchCollection function        return  scope selectedCountry     function newVal  oldVal         if  newVal     oldVal           console log  nothing has changed      scope selectedCountry               else          console log  new value      scope selectedCountry             true

User · Answer

ngOptions directive    scope items     name   a   age  20    name   b   age  30    name   c   age  40       Case-1  label for value in array    lt div gt       lt p gt selected item is     selectedItem   lt  p gt       lt p gt  age of selected item is     selectedItem age    lt  p gt       lt select ng-model  selectedItem  ng-options  item name for item in items  gt       lt  select gt   lt  div gt     Output Explanation  Assume 1st item selected     selectedItem    name   a   age  20      by default  selected item is equal to the value item   selectedItem age   20   Case-2  select as label for value in array    lt div gt       lt p gt selected item is     selectedItem   lt  p gt       lt select ng-model  selectedItem  ng-options  item age as item name for item in items  gt       lt  select gt   lt  div gt     Output Explanation  Assume 1st item selected    selectedItem   20     select part is item age

User · Answer

Run the code snippet and see the variations  Here is note for quick understanding   Example 1 Object selection  - ng-option  os name for os in osList track by os id   Here track by os id is important  amp  should be there and os id as should NOT have before os name    The ng-model  my os  should set to an object with key as id like my os  id  2    Example 2 Value selection   - ng-option  os id as os name for os in osList   Here track by os id should NOT be there and os id as should be there  before os name    The ng-model  my os  should set to a value like my os  2    Rest code snippet will explain    x000D   x000D  angular module  app       controller  ctrl   function  scope   timeout   x000D     x000D                   EXAMPLE 1                     x000D     scope osList    x000D        id  1  name   iOS    x000D        id  2  name   Android    x000D        id  3  name   Windows   x000D      x000D     scope my os    id  2   x000D     x000D     x000D                   EXAMPLE 2                     x000D     timeout function    x000D       scope siteList     x000D              id  1  name   Google    x000D              id  2  name   Yahoo    x000D              id  3  name   Bing   x000D             x000D        1000   x000D       x000D       scope my site   2  x000D     x000D       timeout function    x000D         scope my site   3  x000D         2000   x000D     x000D  fieldset  x000D    margin-bottom  40px  x000D      x000D  strong  x000D    color red  x000D      x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 4 10 angular min js  gt  lt  script gt  x000D   x000D   lt div ng-app  app  ng-controller  ctrl  gt  x000D   x000D     lt  --               EXAMPLE 1                    -- gt  x000D     lt fieldset gt  x000D       lt legend gt Example 1  Set selection as  lt strong gt object lt  strong gt   lt  legend gt  x000D       x000D       lt select ng-model  my os  ng-options  os name for os in osList track by os id  gt  x000D           lt option value    gt --Select-- lt  option gt  x000D         lt  select gt  x000D        my os   x000D       x000D     lt  fieldset gt  x000D     x000D     x000D     lt  --               EXAMPLE 2                    -- gt  x000D     lt fieldset gt  x000D       lt legend gt Example 2  Set selection as  lt strong gt value lt  strong gt   Simulate ajax  lt  legend gt  x000D         lt select ng-model  my site  ng-options  site id as site name for site in siteList  gt  x000D           lt option value    gt --Select-- lt  option gt  x000D         lt  select gt  x000D          my site   x000D     lt  fieldset gt  x000D     x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The ng-options directive does not set the value attribute on the  lt options gt  elements for arrays   Using limit value as limit text for limit in limits means      set the  lt option gt  s label as limit text   save the limit value value into the select s ng-model   See Stack nbsp Overflow question AngularJS ng-options not rendering values

User · Answer

This is how I resolved this  I tracked the select by value and set the selected item property to the model in my JavaScript code   Countries                   CountryId   1  Code    USA   CountryName    United States of America                      CountryId   2  Code    CAN   CountryName    Canada             lt select ng-model  vm Enterprise AdminCountry  ng-options  country CountryName for country in vm Countries track by country CountryId  gt    vm is my controller and the Country in the controller retrieved from the service is  CountryId  1  Code    USA   CountryName  United States of America     When I selected another country from the select dropdown and posted my page with  Save   I got the correct country bound

User · Answer

To send a custom value called my hero to the server using a normal form submit   JSON    heroes         id   iron    label   Iron Man Rocks         id   super    label   Superman Rocks        HTML    lt select ng-model  hero  ng-options  obj id as obj label for obj in heroes  gt  lt  select gt   lt input type  hidden  name  my hero  value    hero      gt    The server will receive either iron or super as the value of my hero   This is similar to the answer by  neemzy  but specifying separate data for the value attribute

User · Answer

Selecting an item in ng-options can be a bit tricky depending on how you set the data source   After struggling with them for a while I ended up making a sample with most common data sources I use  You can find it here   http   plnkr co edit fGq2PM p preview  Now to make ng-options work  here are some things to consider    Normally you get the options from one source and the selected value from other  For example    states    data for ng-options user state    Option to set as selected  Based on 1  the easiest logical thing to do is to fill the select with one source and then set the selected value trough code  Rarely would it be better to get a mixed dataset  AngularJS allows select controls to hold more than key   label  Many online examples put objects as  key   and if you need information from the object set it that way  otherwise use the specific property you need as key   ID  CODE  etc   As in the plckr sample  The way to set the value of the dropdown select control depends on  3    If the dropdown key is a single property  like in all examples in the plunkr   you just set it  e g    scope dropdownmodel    scope user state  If you set the object as key  you need to loop trough the options  even assigning the object will not set the item as selected as they will have different hashkeys  e g    for  var i   0  len    scope options length  i  lt  len  i        if   scope options i  id    savedValue       Your own property here      console log  Found target           scope value    scope options i       break            You can replace savedValue for the same property in the other object   scope myObject myProperty

User · Answer

Instead of using the new  track by  feature you can simply do this with an array if you want the values to be the same as the text    lt select ng-options  v as v for  k v  in Array Obj  gt  lt  select gt    Note the difference between the standard syntax  which will make the values the keys of the Object Array  and therefore 0 1 2 etc  for an array    lt select ng-options k as v for  k v  in Array Obj  gt  lt  select gt    k as v becomes v as v   I discovered this just based on common sense looking at the syntax   k v  is the actual statement that splits the array object into key value pairs   In the  k as v  statement  k will be the value  and v will be the text option displayed to the user  I think  track by  is messy and overkill

User · Answer

lt select ng-model  color  ng-options   c name     c shade  for c in colors  gt  lt  select gt  lt br gt

User · Answer

Here is how I solve this problem in a legacy application   In HTML   ng-options  kitType name for kitType in vm kitTypes track by kitType id  ng-model  vm itemTypeId    In JavaScript   vm kitTypes           id    1    name    Virtual          id    2    name    Physical          id    3    name    Hybrid             vm itemTypeId   vm kitTypes filter function value  index  array       return value id      vm itemTypeId    1      0     My HTML displays the option value properly

User · Answer

This was best suited for all scenarios according to me    lt select ng-model  mySelection value  gt      lt option ng-repeat  r in myList  value    r Id    ng-selected  mySelection value    r Id  gt   r Name       lt  option gt   lt  select gt    where you can use your model to bind the data  You will get the value as the object will contain and the default selection based on your scenario

User · Answer

It is always painful for developers to with ng-options  For example  Getting an empty blank selected value in the select tag  Especially when dealing with JSON objects in ng-options  it becomes more tedious  Here I have done some exercises on that  Objective  Iterate array of JSON objects through ng-option and set selected first element  Data  someNames      quot id quot   quot 1 quot    quot someName quot   quot xyz quot      quot id quot   quot 2 quot    quot someName quot   quot abc quot     In the select tag I had to show xyz and abc  where xyz must be selected without much effort  HTML   lt pre class  quot default prettyprint prettyprinted quot  style  quot  quot  gt  lt code gt       amp lt select class  quot form-control quot  name  quot test quot  style  quot width 160px quot     ng-options  quot name someName for name in someNames quot  ng-model  quot testModel test quot  ng-selected    quot testModel test   testModel test    someNames 0  quot  amp gt   amp lt  select amp gt   lt  code gt  lt  pre gt   By above code sample  you might get out of this exaggeration  Another reference

User · Answer

The correct answer to this question has been provided by user frm adiputra  as currently this seems to be the only way to explicitly control the value attribute of the option elements   However  I just wanted to emphasize that  select  is not a keyword in this context  but it is just a placeholder for an expression  Please refer to the following list  for the definition of the  select  expression as well as other expressions that can be used in ng-options directive   The use of select as it is depicted in the question   ng-options  select p text for p  in resultOptions    is essentially wrong   Based on the list of expressions  it seems that trackexpr may be used to specify the value  when options are given in an array of objects  but it has been used with grouping only     From AngularJS  documentation for ng-options    array   object  an expression which evaluates to an array   object to iterate over  value  local variable which will refer to each item in the array or each property value of object during iteration  key  local variable which will refer to a property name in object during iteration  label  The result of this expression will be the label for  element  The expression will most likely refer to the value variable  e g  value propertyName   select  The result of this expression will be bound to the model of the parent  element  If not specified  select expression will default to value  group  The result of this expression will be used to group options using the  DOM element  trackexpr  Used when working with an array of objects  The result of this expression will be used to identify the objects in the array  The trackexpr will most likely refer to the value variable  e g  value propertyName

[javascript] How do I set the value property in AngularJS' ng-options?

Examples related to javascript

Examples related to angularjs