Setting default value for <select> using Angular.JS

Question

Suppose you have a long HTML form and in which you have a select as follow:

<select id="select_id" ng-model="var2model" ng-options="i for i in ['a','b','c','d','e','f','g','h']"></select>

and in the controller you have a variable $scope.res in which store some data to populate the form with. How to set this select default value? I checked the ng-init but couldn't really have it to work. I tried to set ng-init="i === res.my_var" but no luck. Could someone kindly suggest an approach to solve this?

Here is a snippet from my controller:

var ctrlRes = controllers.controller('ctrlRes', function ($scope, $location, $window, Patient) {
    $window.document.title = 'Results';

    var path = $location.path().split('/');
    var query = path[path.length - 1];
    Patient.get({id: query}, function(data){
        $scope.res = data;
    });

    $scope.editMode = false;
    $scope.editData = function () {
        console.log('editMode on');
        $scope.editMode = true;
        $scope.my_var = $scope.res.my_var;
    };
});
ctrlRes.$inject = ['$scope', 'Patient'];

dieuvn3b · Accepted Answer · 2015-05-28 08:54:20Z

3

You need set value for var2model in your controller: Ex: $scope.var2model = 'a'

answered May 28, 2015 at 8:54

dieuvn3b

6,1243 gold badges19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yashika Garg · Accepted Answer · 2015-05-28 08:57:20Z

For select input you are using var2model as model of the input. So for providing default value you have to assign value to this model object.
For select, in order to assign the default value you have to assign value from array you are using to put values in select options.

So you can do the following:

    var ctrlRes = controllers.controller('ctrlRes', function ($scope, $location, $window, Patient) {
        $window.document.title = 'Results';

        var path = $location.path().split('/');
        var query = path[path.length - 1];
        Patient.get({id: query}, function(data){
            $scope.res = data;
        });

        $scope.selectArray = ['a','b','c','d','e','f','g','h'];
        var index = $scope.selectArray.indexOf($scope.res.my_var);
        $scope.var2model = $scope.selectArray[index];


        $scope.editMode = false;
        $scope.editData = function () {
            console.log('editMode on');
            $scope.editMode = true;
            $scope.my_var = $scope.res.my_var;
        };
    });
    ctrlRes.$inject = ['$scope', 'Patient'];


    <select id="select_id" ng-model="var2model" ng-options="i for i in selectArray"></select>

Mikalai · Accepted Answer · 2015-05-28 08:52:44Z

1

In controller after retrieving data from Patient service you should initialize var2model with default value.

answered May 28, 2015 at 8:52

Mikalai

1,5258 silver badges21 bronze badges

Comments

Alexandru R · Accepted Answer · 2015-05-28 08:56:45Z

0

Just set $scope.var2model = 'a' and remove ng-init. Ng-init has another goal, from their docs:

The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.

answered May 28, 2015 at 8:56

Alexandru R

8,89416 gold badges69 silver badges104 bronze badges

Collectives™ on Stack Overflow

Setting default value for <select> using Angular.JS

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related