How to have a default option in Angular.js select box
I have searched Google and can’t find anything on this.
I have this code.
With some data like this
options = [{
name: ‘Something Cool’,
value: ‘something-cool-value’
}, {
name: ‘Something Else’,
value: ‘something-else-value’
}];
And the output is something like this.
How is it possible to set the first option in the data as the default value so you would get a result like this.
Solutions/Answers:
Solution 1:
You can simply use ng-init like this
<select ng-init="somethingHere = options[0]"
ng-model="somethingHere"
ng-options="option.name for option in options">
</select>
Solution 2:
If you want to make sure your $scope.somethingHere
value doesn’t get overwritten when your view initializes, you’ll want to coalesce (somethingHere = somethingHere || options[0].value
) the value in your ng-init like so:
<select ng-model="somethingHere"
ng-init="somethingHere = somethingHere || options[0].value"
ng-options="option.value as option.name for option in options">
</select>
Solution 3:
Try this:
HTML
<select
ng-model="selectedOption"
ng-options="option.name for option in options">
</select>
Javascript
function Ctrl($scope) {
$scope.options = [
{
name: 'Something Cool',
value: 'something-cool-value'
},
{
name: 'Something Else',
value: 'something-else-value'
}
];
$scope.selectedOption = $scope.options[0];
}
Plunker here.
If you really want to set the value that will be bound to the model, then change the ng-options
attribute to
ng-options="option.value as option.name for option in options"
and the Javascript to
...
$scope.selectedOption = $scope.options[0].value;
Another Plunker here considering the above.
Solution 4:
Only one answer by Srivathsa Harish Venkataramana mentioned track by
which is indeed a solution for this!
Here is an example along with Plunker (link below) of how to use track by
in select ng-options
:
<select ng-model="selectedCity"
ng-options="city as city.name for city in cities track by city.id">
<option value="">-- Select City --</option>
</select>
If selectedCity
is defined on angular scope, and it has id
property with the same value as any id
of any city
on the cities
list, it’ll be auto selected on load.
Here is Plunker for this:
http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview
See source documentation for more details:
https://code.angularjs.org/1.3.15/docs/api/ng/directive/select
Solution 5:
I think, after the inclusion of ‘track by’, you can use it in ng-options to get what you wanted, like the following
<select ng-model="somethingHere" ng-options="option.name for option in options track by option.value" ></select>
This way of doing it is better because when you want to replace the list of strings with list of objects you will just change this to
<select ng-model="somethingHere" ng-options="object.name for option in options track by object.id" ></select>
where somethingHere is an object with the properties name and id, of course. Please note, ‘as’ is not used in this way of expressing the ng-options, because it will only set the value and you will not be able to change it when you are using track by
Solution 6:
The accepted answer use ng-init
, but document says to avoid ng-init if possible.
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.
You also can use ng-repeat
instead of ng-options
for your options. With ng-repeat
, you can use ng-selected
with ng-repeat
special properties. i.e. $index, $odd, $even to make this work without any coding.
$first
is one of the ng-repeat special properties.
<select ng-model="foo">
<option ng-selected="$first" ng-repeat="(id,value) in myOptions" value="{{id}}">
{{value}}
</option>
</select>
———————- EDIT —————-
Although this works, I would prefer @mik-t’s answer when you know what value to select, https://stackoverflow.com/a/29564802/454252, which uses track-by
and ng-options
without using ng-init
or ng-repeat
.
This answer should only be used when you must select the first item without knowing what value to choose. e.g., I am using this for auto completion which requires to choose the FIRST item all the time.