AngularJS Select (Dropdown)

AngularJS can create a dropdown list using an array or an object.

Creating a Select Box Using ng-options

In AngularJS, we can use the ng-options directive to create a dropdown list, with items looped from an object and an array, as shown in the example below:

Example

<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-init="selectedName = names[0]" 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 = ["Google", "tutorialpro", "Taobao"];
});
</script>

ng-init sets the default selected value.

ng-options vs ng-repeat

We can also create a dropdown list using the ng-repeat directive:

Example

<select><option ng-repeat="x in names">{{x}}</option></select>

The ng-repeat directive loops through an array to create the dropdown list, but the ng-options directive is more suitable for creating dropdown lists as it has the following advantages:

Options created with ng-options are objects, while those created with ng-repeat are strings.

Which One to Use?

Suppose we use the following object:

$scope.sites = [
    {site: "Google", url: "http://www.google.com"},
    {site: "tutorialpro", url: "http://www.tutorialpro.org"},
    {site: "Taobao", url: "http://www.taobao.com"}
];

ng-repeat has limitations, as the selected value is a string:

Example

Using ng-repeat:

<select ng-model="selectedSite"><option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option></select>
<h1>You selected: {{selectedSite}}</h1>

Using the ng-options directive, the selected value is an object:

Example

Using ng-options:

<select ng-model="selectedSite" ng-options="x.site for x in sites"></select>
<h1>You selected: {{selectedSite.site}}</h1>
<p>URL: {{selectedSite.url}}</p>

When the selected value is an object, we can obtain more information and the application becomes more flexible.

Data Source as an Object

In the previous examples, we used an array as the data source. Now, we will use an object as the data source.

$scope.sites = {
    site01: "Google",
    site02: "tutorialpro",
    site03: "Taobao"
};

ng-options behaves differently when using an object, as shown below:

Example

Using an object as the data source, x is the key, and y is the value:

<select ng-model="selectedSite" ng-options="x for (x, y) in sites"></select>
<h1>You selected: {{selectedSite}}</h1>

The selected value is the value in the key-value pair.

The value in the key-value pair can also be an object:

Example

The selected value in the key-value pair's value, which 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"}
};

In the dropdown menu, you can also use the properties of the object directly without using the key in the key-value pair:

Example

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>