AngularJs - ng-model in a SELECT

Question

JSfiddle  Problem   I have a SELECT-element in my page  which is filled in with an ng-repeat  It also has a ng-model which has a default value   When I change the value  the ng-model adapts  that s ok  But the dropdown-list shows an empty slot at launch  where it should have the item with the default value selected instead   Code   lt div ng-app ng-controller  myCtrl  gt       lt select class  form-control  ng-change  unitChanged    ng-model  data unit  gt            lt option ng-repeat  item in units  ng-value  item id  gt   item label   lt  option gt       lt  select gt   lt  div gt    With JS   function myCtrl   scope         scope units               id   10   label    test1              id   27   label    test2              id   39   label    test3                    scope data              id   1           unit   27

User · Answer

You dont need to define option tags  you can do this using the ngOptions directive  https   docs angularjs org api ng directive ngOptions   lt select class  form-control  ng-change  unitChanged    ng-model  data unit  ng-options  unit id as unit label for unit in units  gt  lt  select gt

User · Answer

You can use the ng-selected directive on the option elements  It takes expression that if truthy will set the selected property   In this case     lt option ng-selected  data unit    item id           ng-repeat  item in units           ng-value  item id  gt   item label   lt  option gt    Demo   x000D   x000D  angular module  app      controller  myCtrl  function  scope    x000D       scope units     x000D            id   10   label    test1    x000D            id   27   label    test2    x000D            id   39   label    test3    x000D        x000D   x000D           scope data     x000D           id   1  x000D           unit   27 x000D            x000D   x000D      x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   lt div ng-app  app  ng-controller  myCtrl  gt  x000D       lt select class  form-control  ng-change  unitChanged    ng-model  data unit  gt  x000D            lt option ng-selected  data unit    item id  ng-repeat  item in units  ng-value  item id  gt   item label   lt  option gt  x000D       lt  select gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can also put the item with the default value selected out of the ng-repeat like follow      lt div ng-app  app  ng-controller  myCtrl  gt       lt select class  form-control  ng-change  unitChanged    ng-model  data unit  gt           lt option value  yourDefaultValue  gt Default one lt  option gt           lt option ng-selected  data unit    item id  ng-repeat  item in units  ng-value  item id  gt   item label   lt  option gt       lt  select gt   lt  div gt    and don t forget the value atribute if you leave it blank you will have the same issue

User · Answer

However  ngOptions provides some benefits such as reducing memory and increasing speed by not creating a new scope for each repeated instance  angular docs   Alternative solution is use ng-init directive  You can specify function that will be initialize your default data    scope init   function                angular forEach  scope units  function item                   if item id      scope data unit                        scope data unit   item                                                 See jsfiddle

User · Answer

try the following code    In your controller     function myCtrl   scope           scope units                id   10   label    test1               id   27   label    test2               id   39   label    test3                  scope data   scope units 0      Set by default the value  test1        In your page      lt select ng-model  data  ng-options  opt as opt label for opt in units   gt                   lt  select gt    Working Fiddle

User · Answer

Select s default value should be one of its value in the list  In order to load the select with default value you can use ng-options  A scope variable need to be set in the controller and that variable is assigned as ng-model in HTML s select tag   View this plunker for any references   http   embed plnkr co hQiYqaQXrtpxQ96gcZhq preview

[javascript] AngularJs - ng-model in a SELECT

Examples related to javascript

Examples related to jquery

Examples related to angularjs

Examples related to angular-ngmodel