Latest web development tutorials
 

AngularJS ng-options Directive


Example

Fill options in a dropdown list by using the items of an array:

<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="item for item in names"></select>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>
Try it Yourself »

Definition and Usage

The ng-options directive fills a <select> element with <options>.

The ng-options directive uses an array to fill the dropdown list. In many cases it would be easier to use the ng-repeat directive, but you have more flexibility when using the ng-options directive.


Syntax

<select ng-options="array expression"></select>

Supported by the <select> element.


Parameter Values

Value Description
array expression An expression that selects the specified parts of an array to fill the select element.

Legal expressions:

label for value in array

select as label for value in array

label
group by group for value in array

label
disabled when disable for value in array

label
group by group for value in array track by expression

label
disabled when disable for value in array track by expression

label
for value in array | orderBy expression track by expression