AngularJs - ng-model in a SELECT

Question

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

<div ng-app ng-controller="myCtrl">
    <select class="form-control" ng-change="unitChanged()" ng-model="data.unit">
         <option ng-repeat="item in units" ng-value="item.id">{{item.label}}</option>
    </select>
</div>

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
        }

};

score 80 · Accepted Answer · answered May 05 '15 at 09:16

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

angular.module("app",[]).controller("myCtrl",function($scope) {
    $scope.units = [
        {'id': 10, 'label': 'test1'},
        {'id': 27, 'label': 'test2'},
        {'id': 39, 'label': 'test3'},
    ]

        $scope.data = {
        'id': 1,
        'unit': 27
        }

});

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

This did the job: the other answers where helpful but I can't change the data-formats because they are used in other places and in other situations as well. This solved the problem without messing up the other data. — Jordumus, May 05 '15 at 09:22
The angular docs for [`ngSelected`](https://docs.angularjs.org/api/ng/directive/ngSelected) say it shouldn't be used with `ngModel`. — Travis Heeter, May 25 '17 at 13:02

score 17 · Answer 2 · edited May 05 '15 at 09:55

17

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 :

 <select ng-model="data" ng-options="opt as opt.label for opt in units ">
                </select>

Working Fiddle

edited May 05 '15 at 09:55

Bijay Rai

961
1
12
32

answered May 05 '15 at 09:11

carton

1,168
9
17

It is a nice solution, but it wouldn't help me in my situation as I can't change the format of my data. I did copy the snippet for use in other situations in the future tho! – Jordumus May 05 '15 at 09:23
How do you show in HTML with data binding which option has been selected? – Stephen Kuehl Apr 19 '16 at 20:01
@StephenKuehl You have to set your model (var passed to ngModel) with the selected value you want. – Disfigure Sep 01 '16 at 15:59

score 7 · Answer 3 · answered May 05 '15 at 09:54

7

You dont need to define option tags, you can do this using the ngOptions directive: https://docs.angularjs.org/api/ng/directive/ngOptions

<select class="form-control" ng-change="unitChanged()" ng-model="data.unit" ng-options="unit.id as unit.label for unit in units"></select>

answered May 05 '15 at 09:54

Numyx

1,758
2
11
16

1

annoying part of this solution is that ng-model sets the target to what you are repeating in ng-options. Theres no way to set to a field of what are repeating (such as the id). – Sam Oct 28 '15 at 00:11

score 3 · Answer 4 · answered May 05 '15 at 09:58

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

score 2 · Answer 5 · answered May 11 '16 at 09:39

You can also put the item with the default value selected out of the ng-repeat like follow :

<div ng-app="app" ng-controller="myCtrl">
    <select class="form-control" ng-change="unitChanged()" ng-model="data.unit">
        <option value="yourDefaultValue">Default one</option>
        <option ng-selected="data.unit == item.id" ng-repeat="item in units" ng-value="item.id">{{item.label}}</option>
    </select>
</div>

and don't forget the value atribute if you leave it blank you will have the same issue.

score 1 · Answer 6 · answered May 05 '15 at 09:47

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

AngularJs - ng-model in a SELECT

6 Answers6

Linked