CODEWITHSUNDEEP
javascriptangularjshtml-select
user7397787
user7397787

Reputation: 1480

Set a default value in a select dropdown using Angular

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

Upvotes: 0

Views: 2156

Answers (5)

Srinivas ML
Srinivas ML

Reputation: 730

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

Upvotes: 2

Sajeetharan
Sajeetharan

Reputation: 222722

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>

Upvotes: 3

Vivz
Vivz

Reputation: 6630

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

Upvotes: 1

Mistalis
Mistalis

Reputation: 18309

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>

Upvotes: 1

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38693

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">

Upvotes: 1

Related Questions