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 · Accepted 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:

<option ng-selected="data.unit == item.id" 
        ng-repeat="item in units" 
        ng-value="item.id">{{item.label}}</option>

Demo

_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_

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>_x000D_
<div ng-app="app" ng-controller="myCtrl">_x000D_
    <select class="form-control" ng-change="unitChanged()" ng-model="data.unit">_x000D_
         <option ng-selected="data.unit == item.id" ng-repeat="item in units" ng-value="item.id">{{item.label}}</option>_x000D_
    </select>_x000D_
</div>

_x000D_

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

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 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

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

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

[javascript] AngularJs - ng-model in a SELECT

Examples related to javascript

Examples related to jquery

Examples related to angularjs

Examples related to angular-ngmodel