Working with select using AngularJS s ng-options

Question

I have read about it in other posts  but I couldn t figure it out   I have an array    scope items         ID   000001   Title   Chicago        ID   000002   Title   New York        ID   000003   Title   Washington         I want to render it as    lt select gt     lt option value  000001  gt Chicago lt  option gt     lt option value  000002  gt New York lt  option gt     lt option value  000003  gt Washington lt  option gt   lt  select gt    And also I want to select the option with ID 000002   I have read select and tried  but I can t figure it out

User · Answer

For some reason AngularJS allows to get me confused. Their documentation is pretty horrible on this. More good examples of variations would be welcome.

Anyway, I have a slight variation on Ben Lesh's answer.

My data collections looks like this:

items =
[
   { key:"AD",value:"Andorra" }
,  { key:"AI",value:"Anguilla" }
,  { key:"AO",value:"Angola" }
 ...etc..
]

Now

<select ng-model="countries" ng-options="item.key as item.value for item in items"></select>

still resulted in the options value to be the index (0, 1, 2, etc.).

Adding Track By fixed it for me:

<select ng-model="blah" ng-options="item.value for item in items track by item.key"></select>

I reckon it happens more often that you want to add an array of objects into an select list, so I am going to remember this one!

Be aware that from AngularJS 1.4 you can't use ng-options any more, but you need to use ng-repeat on your option tag:

<select name="test">
   <option ng-repeat="item in items" value="{{item.key}}">{{item.value}}</option>
</select>

User · Answer

I m learning AngularJS and was struggling with selection as well  I know this question is already answered  but I wanted to share some more code nevertheless   In my test I have two listboxes  car makes and car models  The models list is disabled until some make is selected  If selection in makes listbox is later reset  set to  Select Make   then the models listbox becomes disabled again AND its selection is reset as well  to  Select Model    Makes are retrieved as a resource while models are just hard-coded   Makes JSON       code    0    name    Select Make      code    1    name    Acura      code    2    name    Audi       services js   angular module  makeServices     ngResource     factory  Make   function  resource       return  resource  makes json                 query   method  GET   isArray true                HTML file    lt div ng controller  MakeModelCtrl  gt     lt div gt Make lt  div gt     lt select id  makeListBox        ng-model  make selected        ng-options  make code as make name for make in makes        ng-change  makeChanged make selected   gt     lt  select gt      lt div gt Model lt  div gt     lt select id  modelListBox       ng-disabled  makeNotSelected       ng-model  model selected       ng-options  model code as model name for model in models  gt     lt  select gt   lt  div gt    controllers js   function MakeModelCtrl  scope         scope makeNotSelected   true       scope make    selected   0         scope makes   Make query     function  makes              scope make    selected  makes 0  code                 scope makeChanged   function selectedMakeCode             scope makeNotSelected    selectedMakeCode          if   scope makeNotSelected                         scope model    selected   0                           scope models            code  0   name  Select Model           code  1   name  Model1           code  2   name  Model2               scope model    selected   0

User · Answer

If you need a custom title for each option  ng-options is not applicable  Instead use ng-repeat with options    lt select ng-model  myVariable  gt     lt option ng-repeat  item in items            value    item ID              title  Custom title    item Title      item ID     gt           item Title      lt  option gt   lt  select gt

User · Answer

In CoffeeScript    directive app directive  select2   - gt      templateUrl   partials select html      restrict   E      transclude  1     replace  1     scope          options              model          link   scope  el  atr - gt          el bind  change   - gt              console log this value             scope model   parseInt this value              console log scope             scope  apply        lt  -- HTML partial -- gt   lt select gt     lt option ng-repeat  o in options            value     index    ng-bind  o  gt  lt  option gt   lt  select gt    lt  -- HTML usage -- gt   lt select2 options  mnuOffline  model  offlinePage toggle   gt  lt  select2 gt    lt  -- Conclusion -- gt   lt p gt Sometimes it s much easier to create your own directive    lt  p gt

User · Answer

The question is already answered  BTW  really good and comprehensive answer provided by Ben   but I would like to add another element for completeness  which may be also very handy   In the example suggested by Ben    lt select ng-model  blah  ng-options  item ID as item Title for item in items  gt  lt  select gt    the following ngOptions form has been used  select as label for value in array   Label is an expression  which result will be the label for  lt option gt  element  In that case you can perform certain string concatenations  in order to have more complex option labels   Examples    ng-options  item ID as item Title     -     item ID for item in items  gives you labels like Title - ID ng-options  item ID as item Title          item Title length       for item in items  gives you labels like Title  X   where X is length of Title string    You can also use filters  for example    ng-options  item ID as item Title           item Title   uppercase        for item in items  gives you labels like Title  TITLE   where Title value of Title property and TITLE is the same value but converted to uppercase characters  ng-options  item ID as item Title           item SomeDate   date        for item in items  gives you labels like Title  27 Sep 2015   if your model has a property SomeDate

User · Answer

One thing to note is that ngModel is required for ngOptions to work    note the ng-model  blah  which is saying  set  scope blah to the selected value    Try this    lt select ng-model  blah  ng-options  item ID as item Title for item in items  gt  lt  select gt    Here s more from AngularJS s documentation  if you haven t seen it       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         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        For some clarification on option tag values in AngularJS   When you use ng-options  the values of option tags written out by ng-options will always be the index of the array item the option tag relates to  This is because AngularJS actually allows you to select entire objects with select controls  and not just primitive types  For example   app controller  MainCtrl   function  scope        scope items            id  1  name   foo            id  2  name   bar            id  3  name   blah                 lt div ng-controller  MainCtrl  gt      lt select ng-model  selectedItem  ng-options  item as item name for item in items  gt  lt  select gt      lt pre gt   selectedItem   json   lt  pre gt   lt  div gt    The above will allow you to select an entire object into  scope selectedItem directly  The point is  with AngularJS  you don t need to worry about what s in your option tag  Let AngularJS handle that  you should only care about what s in your model in your scope   Here is a plunker demonstrating the behavior above  and showing the HTML written out    Dealing with the default option   There are a few things I ve failed to mention above relating to the default option   Selecting the first option and removing the empty option   You can do this by adding a simple ng-init that sets the model  from ng-model  to the first element in the items your repeating in ng-options    lt select ng-init  foo   foo    items 0   ng-model  foo  ng-options  item as item name for item in items  gt  lt  select gt    Note  This could get a little crazy if foo happens to be initialized properly to something  falsy   In that case  you ll want to handle the initialization of foo in your controller  most likely   Customizing the default option   This is a little different  here all you need to do is add an option tag as a child of your select  with an empty value attribute  then customize its inner text    lt select ng-model  foo  ng-options  item as item name for item in items  gt      lt option value    gt Nothing selected lt  option gt   lt  select gt    Note  In this case the  empty  option will stay there even after you select a different option  This isn t the case for the default behavior of selects under AngularJS   A customized default option that hides after a selection is made   If you wanted your customized default option to go away after you select a value  you can add an ng-hide attribute to your default option    lt select ng-model  foo  ng-options  item as item name for item in items  gt      lt option value    ng-if  foo  gt Select something to remove me  lt  option gt   lt  select gt

User · Answer

I hope the following will work for you    lt select class  form-control          ng-model  selectedOption          ng-options  option name           option price   currency  USD          for option in options  gt   lt  select gt

User · Answer

It can be useful  Bindings do not always work    lt select id  product  class  form-control  name  product  required         ng-model  issue productId          ng-change  getProductVersions            ng-options  p id as p shortName for p in products  gt  lt  select gt    For example  you fill the options list source model from a REST service  A selected value was known before filling the list  and it was set  After executing the REST request with  http  the list option is done   But the selected option is not set  For unknown reasons AngularJS in shadow  digest executing does not bind selected as it should be  I have got to use jQuery to set the selected  It s important  AngularJS  in shadow  adds the prefix to the value of the attr  value  for generated by ng-repeat options  For int it is  number      scope issue productId   productId  function activate          http get   product list           then function  response                scope products   response data              if  productId                   console log          product option   length    for clarity                 timeout function                         console log          product option   length    for clarity                        product   val  number   productId                      200

[javascript] Working with select using AngularJS's ng-options

Examples related to javascript

Examples related to angularjs

Examples related to html-select

Examples related to ng-options