Angularjs - Ng-model In A Select

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

Solution 1:

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:

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

});

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

Solution 2:

try the following code :

In your controller :

functionmyCtrl ($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

Solution 3:

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

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

Solution 4:

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

Solution 5:

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

<divng-app="app"ng-controller="myCtrl"><selectclass="form-control"ng-change="unitChanged()"ng-model="data.unit"><optionvalue="yourDefaultValue">Default one</option><optionng-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.