AngularJS dropdown box

AngularJS allows you to create a dropdown list based on items in an array or object.

Create a dropdown box using ng-options

If you want to create a dropdown list based on an object or array in AngularJS, you should use ng-options Command:

Example

<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

ng-options with ng-repeat

You can also use ng-repeat The command to create the same dropdown list:

Example

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

Try It Yourself

Due to ng-repeat The command repeats a segment of HTML code for each item in the array, so it can be used to create options in dropdown lists, but ng-options The command is specifically designed for filling options in dropdown lists.

Which one should be used?

You can use ng-repeat Command and ng-options Command:

Assuming you have an array of objects:

$scope.cars = [
  {model : "Ford Mustang", color : "red"},
  {model : "Fiat 500", color : "white"},
  {model : "Volvo XC90", color : "black"}
];

Example

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 a value as an object, use ng-value with value:

Example

Replace ng-repeat Used as an object:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>You selected a {{selectedCar.color}} {{selectedCar.model}}</h1>

Try It Yourself

Example

Using ng-options:

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>You selected: {{selectedCar.model}}</h1>
<p>Its color is: {{selectedCar.color}}</p>

Try It Yourself

When the selected value is an object, it can contain more information, and your application can be more flexible.

We will use ng-options Directive.

As the data source of the object

In the previous example, the data source was an array, but we can also use an object.

Assuming you have an object with key-value pairs:

$scope.cars = {
  car01 : "Ford",
  car02 : "Fiat",
  car03 : "Volvo"
};

ng-options The expression in the attribute is slightly different for objects:

Example

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

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

Try It Yourself

The selected value will always be in the key-value pair ofValue.

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

Example

The selected value will still be in the key-value pair.ValueThis 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

The options in the dropdown list do not have to be in the key-value pair ofKeyIt can also be a value, or a property of a value object:

Example

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

Try It Yourself