How to set default value in ng-options
Solution 1
Use ng-init
to set default value for ng-options
.
Here is the: demo
<select name="repeatSelect"
id="repeatSelect"
ng-model="repeatSelect"
ng-init=" repeatSelect = data[0].id"
ng-options="option.id as option.name for option in data">
</select>
Solution 2
All this miss use of ng-init
.
From the angular docs:
This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit, such as for aliasing special properties of ngRepeat, as seen in the demo below; and for injecting data via server side scripting. Besides these few cases, you should use controllers rather than ngInit to initialize values on a scope.
In my opinion the correct way to set a default value is to simply pre-fill your ng-model
property with the value selected from your ng-options
, angular does the rest.
Essentially when you define the $scope
property your select will bind to assign it the default value from your data
array. If your data
array is from an ajax request, just assign it once you have the data
.
.controller('test', ['$scope', function ($scope) {
$scope.data = [{name: 'one', id: 1}, {name: 'two', id: 2},{name: 'three', id: 3}];
$scope.repeatSelect= $scope.data[0];
}]);
There is one caveat to note. If you employ the as
key word in your expression you have to assign your ng-model
with the actual property your telling it to select.
See full fiddle demoing both: http://jsfiddle.net/kb99gee8/
Solution 3
i have acheieved what you need using your code and ng-options
like you mentioned, here is Working Fiddle
Full CODE
<div ng-app="ngrepeatSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="repeatSelect">Angular select:</label>
<select name="repeatSelect"
id="repeatSelect"
ng-model="repeatSelect"
ng-init=" repeatSelect = data[0]"
ng-options="option.name for option in data track by option.id">
</select>
</form>
<br/> <tt>Selected value: {{repeatSelect.id}}</tt>
</div>
</div>
<br/>
Solution 4
I will suggest an example HTML part
<select class="form-control" ng-model="data.selectedOption" required ng-options="option.name as option.name for option in venueNamelists" ng-change="getmediationRooms(data.selectedOption)"></select>
In my controller
$scope.data = {selectedOption: $scope.venueNamelists[i].name};
the model value should equal to the key,value pair in the venueNamelists.
![mpsbhat](https://i.stack.imgur.com/a6YLZ.jpg?s=256&g=1)
mpsbhat
Myself BTech professional and a programming enthusiast. Interested in front end design, Google APIs, CMS like wordpress, etc.
Updated on May 30, 2020Comments
-
mpsbhat about 4 years
I can set a dropdown list with default value in angularjs as,
<select name="repeatSelect" id="repeatSelect" ng-model="repeatSelect" ng-init=" repeatSelect = data[0].id"> <option ng-repeat="option in data" value="{{option.id}}">{{option.name}}</option> </select>
How can I achieve the same using
ng-options
? I treid with,<select name="repeatSelect" id="repeatSelect" ng-model="repeatSelect" ng-init=" repeatSelect = option.id" ng-options="option.name for option in data track by option.id"> </select>
But no use. Sample fiddle is here
-
sch over 8 yearsI'd also like to know that, since I do it like this. +1
-
gerl over 8 yearsthis is assuming your first item is "- Select - ". What if you dont have that option? Should I manually add it anyway?
-
ste2425 over 8 years@klskl i think it was just someone not liking being called out for wrong use of
nginit
. I can't think of any other reason, even the docs says it should only be used for a couple of use cases which doesn't include this. -
raviraja almost 5 yearswhat if the ng-model value is not present in ng-options? it will show empty.