AngularJS lets you create dropdown lists based on items in an array, or an object.
If you want to create a dropdown list, based on a object or an array in AngularJS, you should use the ng-option
directive:
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName"
ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {
$scope.names = ["Emil", "Tobias",
"Linus"];
});
</script>
Try it Yourself »
You can also use the ng-repeat
directive to make the same dropdown list:
Because the ng-repeat
directive repeats a block of HTML code for
each item in an array, it can be used to create options in a dropdown list, but
the ng-options
directive was made especially for filling a dropdown
list with options, and has at least one important advantage:
Dropdowns made with ng-options
allows the selected value to be
an object, while dropdowns made from ng-repeat
has
to be a string.
Assume you have an array of objects:
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];
ng-repeat
directive has it's limitations, the selected value must be a string:
Using ng-repeat
:
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>You selected: {{selectedCar}}</h1>
Try it Yourself »
When using the ng-options
directive, the selected value can be an object:
Using ng-options
:
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>You selected: {{selectedCar.model}}</h1>
<p>It's color is: {{selectedCar.color}}</p>
Try it Yourself »
When the selected value can be an object, it can hold more information, and your application can be more flexible.
We will use the ng-options
directive in this tutorial.
In the previous examples the data source was an array, but we can also use an object.
Assume you have an object with key-value pairs:
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
};
expression in the ng-options
attribute is a bit different
for objects:
Using an object as the data source, x
represents the key, and
y
represents the value:
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>You selected: {{selectedCar}}</h1>
Try it Yourself »
selected value will always be the value in a key-value pair.
value in a key-value pair can also be an object:
selected value will still be the value in a key-value pair, only this time it is an object:
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color :
"red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
Try it Yourself »
options in the dropdown list does not have be the key in a key-value pair, it can also be the value, or a property of the value object:
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>
Try it Yourself »