Set a default value in a select dropdown using Angular

Question

I have one simple drop down here.
Here by default I need to show Tobias as selected.How to do it?

<body>

<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
<option selected="selected">Tobias</option>
</select>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

</body>

This is what am trying in my original code.

<select><option value="" selected="selected">{{data.LeaveType}}</option><option data-ng-repeat="data in leaveTypes" value="{{data.id}}">{{data.Name}}</option></select>

//Here data.LeaveType is other method(getting selected option from backend)
//data in leaveTypes -to load drop down data

Try $scope.selectedName = 'Tobias'.

31piy
– 31piy

2017-06-20 11:05:22 +00:00
Commented Jun 20, 2017 at 11:05 — 31piy
– 31piy, Commented Jun 20, 2017 at 11:05

Sajeetharan · Accepted Answer · 2017-06-20 11:15:16Z

3

Just set default value using ng-init

<select ng-model="selectedName" ng-init="selectedName=='Tobias'" ng-options="x for x in names">

DEMO

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello AngularJS</title>
</head>

<body ng-controller="myCtrl">     
<select ng-model="selectedName" ng-init="selectedName='Tobias'"
ng-options="x for x in names"></select>
 <script src="https://code.angularjs.org/1.6.1/angular.js"></script>
 </body>
</html>

edited Jun 20, 2017 at 11:15

answered Jun 20, 2017 at 11:04

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

1 Comment

Sajeetharan Over a year ago

post your array

Srinivas ML · Accepted Answer · 2017-06-20 12:01:45Z

2

I think leaveTypes value you are using is of object type ,where you want to display name but select id, for these kind of scenarios use ngOptions instead of ngRepeat

and modify your select as below, I had assigned id 2 for Tobias

<select ng-model="selectedName" ng-init="selectedName=2" ng-options="data.id as data.name for data in leaveTypes"></select>

Please check below plunker for demo

https://plnkr.co/edit/GWsXGohTr6jvG67CY00D?p=preview

answered Jun 20, 2017 at 12:01

Srinivas ML

7303 silver badges12 bronze badges

5 Comments

user7397787 Over a year ago

yah I have tried as you said ..am getting drop down data but that selected option only is not coming:-( trying for more than 5hrs.

Srinivas ML Over a year ago

Can you please send your controller and html

user7397787 Over a year ago

I got selected option srinivas :-):-) based on that selected option am displaying balance count right.for that am hitting one more method and getting response also,but am unable to append that response in available leaves field because defaultly am getting `available leaves' from service .

user7397787 Over a year ago

<form id="row editLeaveDetails" ng-repeat="data in leaveDetails">                     <div>                         <label>Leave Type</label>                         <select id="levType" ng-model="selectedName" ng-init="selectedName=data.LeavetypeId" ng-options="data.id as data.Name for data in leaveTypes" ng-blur="leaveBalance(selectedName)"></select>                     </div>                     <div>                         <label>Availabe Leaves</label>                         <input id="levTaken" ng-model="data.Balance">                     </div>                 </form>

user7397787 Over a year ago

I am getting response like this

$http(httpRequest).then(function (response) {                                     $scope.noOfValues = response.data;                                     $scope.balanceCount = $scope.noOfValues[0].balance_count;                                 })

Ramesh Rajendran · Accepted Answer · 2017-06-20 11:07:05Z

1

Set default value for your ng-model object with using ng-value

<select ng-model="selectedName" ng-value="{{selectedName='Tobias'}}"
ng-options="x for x in names">

answered Jun 20, 2017 at 11:07

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

Comments

Mistalis · Accepted Answer · 2017-06-20 11:07:13Z

1

You can also default set selectedName in your controller:

$scope.selectedName = 'Tobias';

So in your view:

<select ng-model="selectedName" ng-options="x for x in names">

In my opinion, it is cleaner than setting it the view with ng-init, in order to keep the logic in the controller.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.selectedName = 'Tobias';
    $scope.names = ["Emil", "Tobias", "Linus"];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
    <select ng-model="selectedName" ng-options="x for x in names"></select>
</div>

answered Jun 20, 2017 at 11:07

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

2 Comments

user7397787 Over a year ago

Why its not working for my original code?what I did wrong

<select  ng-model="selectedName" selectedName="data.LeaveType"><option data-ng-repeat="data in leaveTypes" value="{{data.id}}">{{data.Name}}</option></select>

Mistalis Over a year ago

@user7397787 Try to use ng-options.

Vivz · Accepted Answer · 2017-06-20 11:09:40Z

1

You can assign your ng-model to the default value.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $scope.selectedName="Tobias";
});

Working Plunker:https://plnkr.co/edit/cVaX1VdwFqAh8MoanNJS?p=preview

answered Jun 20, 2017 at 11:09

Vivz

6,6282 gold badges19 silver badges34 bronze badges

Collectives™ on Stack Overflow

Set a default value in a select dropdown using Angular

5 Answers 5

1 Comment

5 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

5 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related