Select default option in select box - AngularJs

Question

What is the easiest way to select default value of select box, by using angularJs?

I have this control:

    <div class="col-md-1">
        <label for="timeZone">Time zone</label>
        <select id="timeZone" name="timeZone" class="form-control"
            ng-model="newTestSessionCtrl.formData.timeZoneValues"
            ng-options="timeZone.name for timeZone in newTestSessionCtrl.viewData.timeZoneValues">
            <option value="" disabled selected>Select</option>
        </select>
    </div>

And in my controller I have definde timeZoneValues like this:

timeZoneValues: [{value: "UTC", name: "UTC"}, {value: "UTC+1", name:"UTC+1"}]

What I was trying to do is to use ng-init. Like it is explained here but I guess I am doing something the wrong way.

What I am trying to do is to select UTC by default.

Add in your controller : newTestSessionCtrl.formData.timeZoneValues = "UTC" — pedromarce, Oct 27 '16 at 12:59

score 0 · Answer 1 · answered Oct 27 '16 at 12:53

is this work?

<div class="col-md-1">
    <label for="timeZone">Time zone</label>
    <select id="timeZone" name="timeZone" class="form-control"
        ng-model="newTestSessionCtrl.formData.timeZoneValues"
        ng-init="newTestSessionCtrl.formData.timeZoneValues = timeZone[0]"
        ng-options="timeZone.name for timeZone in newTestSessionCtrl.viewData.timeZoneValues">
        <option value="" disabled selected>Select</option>
    </select>
</div>

Thanks for responding. I have try it like that as well, but it doesn't work. :( @ErenAkkus — nemo_87, Oct 27 '16 at 12:55

Beslinda N. · Answer 2 · 2016-10-27T13:15:33.530

0

Remove the empty option:

<div class="col-md-1">
    <label for="timeZone">Time zone</label>
    <select id="timeZone" name="timeZone" class="form-control"
        ng-model="selected"
        ng-options="timeZone as timeZone.name for timeZone in newTestSessionCtrl.viewData.timeZoneValues">
    </select>
</div>

and on the javascript add

$scope.selected = timeZoneValues[0].name;

edited Oct 27 '16 at 13:15

answered Oct 27 '16 at 12:59

Beslinda N.

4,808
5
27
33

If I do that then default is empty value. @BeslindaN. – nemo_87 Oct 27 '16 at 13:00

aurel · Answer 3 · 2016-10-27T13:19:18.100

0

I had the same problem and this is how I solved:

Here is the html code:

<div class="col-md-1">
    <label for="timeZone">Time zone</label>
    <select ng-model="defaultValue" ng-options="timeZone.name for timeZone in newTestSessionCtrl.viewData.timeZoneValues" ></select>
</div>

And in the controller I set the default value to the first value of the array:

$scope.defaultValue = $scope.timeZoneValues[0].name;

Hope this helps

edited Oct 27 '16 at 13:19

answered Oct 27 '16 at 13:02

aurel

54
1
11

That's incorrect, your use of ng-model is invalid as it would bind the selected option to the array, overwriting the original value available in position 0 once you have changed it. – pedromarce Oct 27 '16 at 13:04
@pedromarce That has worked for me, and there was no overwriting of the original value – aurel Oct 27 '16 at 13:06
Try to select the second option in your select, has the first option now been changed to be like second? – pedromarce Oct 27 '16 at 13:10
By the way, your first code is correct, problem is in your second option (the one untested). – pedromarce Oct 27 '16 at 13:16
@pedromarce I see, Ok then I cannot argue with that, I will remove that one then – aurel Oct 27 '16 at 13:19

pedromarce · Answer 4 · 2016-10-27T13:15:23.507

Assign the default value in your controller to the ng-model:

timeZoneValues: [{value: "UTC", name: "UTC"}, {value: "UTC+1", name:"UTC+1"}];
newTestSessionCtrl.formData.timeZoneValues = "UTC";

newSessionCtrl needs to be whatever you are using to refer to the controller itself from the controller, or scope if you are not.

Also, you could use:

<div class="col-md-1">
    <label for="timeZone">Time zone</label>
    <select id="timeZone" name="timeZone" class="form-control"
        ng-model="newTestSessionCtrl.formData.timeZoneValues"
        ng-options="timeZone.name for timeZone in newTestSessionCtrl.viewData.timeZoneValues"
        ng-init="newTestSessionCtrl.formData.timeZoneValues = newTestSessionCtrl.viewData.timeZoneValues[0].name">
    </select>
</div>

score 0 · Answer 5 · answered Oct 27 '16 at 15:01

You have missed assigning value inside ng-init directive in the select tag. See the below working plnkr

http://plnkr.co/edit/SBrSUjrfWHJvkufVjSJG?p=preview

HTML:

 <body ng-controller="MainCtrl">
    <div class="col-md-1">
        <label for="timeZone">Time zone</label>
        <select id="timeZone" name="timeZone" class="form-control" ng-init="timeZoneModel = timeZoneValues[0]"
            ng-model="timeZoneModel"
            ng-options="timeZone.name for timeZone in timeZoneValues">
            <option value="" disabled selected>Select</option>
        </select>
    </div>
  </body>

JS:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.timeZoneValues = [{value: "UTC", name: "UTC"}, {value: "UTC+1", name:"UTC+1"}];
});

Select default option in select box - AngularJs

5 Answers5