HTML SELECT
element with angular data-binding.
The select
directive is used together with ngModel
to provide data-binding
between the scope and the <select>
control (including setting default values).
It also handles dynamic <option>
elements, which can be added using the ngRepeat
or
ngOptions
directives.
When an item in the <select>
menu is selected, the value of the selected option will be bound
to the model identified by the ngModel
directive. With static or repeated options, this is
the content of the value
attribute or the textContent of the <option>
, if the value attribute is missing.
If you want dynamic value attributes, you can use interpolation inside the value attribute.
select
directive used without ngOptions
is always a string.
When the model needs to be bound to a non-string value, you must either explicitly convert it
using a directive (see example below) or use ngOptions
to specify the set of options.
This is because an option element can only be bound to string values at present.
If the viewValue of ngModel
does not match any of the options, then the control
will automatically add an "unknown" option, which it then removes when the mismatch is resolved.
Optionally, a single hard-coded <option>
element, with the value set to an empty string, can
be nested into the <select>
element. This element will then represent the null
or "not selected"
option. See example below for demonstration.
ngRepeat
can be used on <option>
elements instead of ngOptions to achieve a similar result. However, ngOptions
provides some benefits, such as
more flexibility in how the <select>
's model is assigned via the select
as
part of the
comprehension expression, and additionally in reducing memory and increasing speed by not creating
a new scope for each repeated instance.
<select
ng-model="string"
[name="string"]
[multiple="string"]
[required="string"]
[ng-required="string"]
[ng-change="string"]
[ng-options="string"]>
...
</select>
Param | Type | Details |
---|---|---|
ngModel | string |
Assignable angular expression to data-bind to. |
name
(optional)
|
string |
Property name of the form under which the control is published. |
multiple
(optional)
|
string |
Allows multiple options to be selected. The selected values will be bound to the model as an array. |
required
(optional)
|
string |
Sets |
ngRequired
(optional)
|
string |
Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute. |
ngChange
(optional)
|
string |
Angular expression to be executed when selected option(s) changes due to user interaction with the select element. |
ngOptions
(optional)
|
string |
sets the options that the select is populated with and defines what is
set on the model on selection. See |
select
elements with static options
<div ng-controller="ExampleController">
<form name="myForm">
<label for="singleSelect"> Single select: </label><br>
<select name="singleSelect" ng-model="data.singleSelect">
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
</select><br>
<label for="singleSelect"> Single select with "not selected" option and dynamic option values: </label><br>
<select name="singleSelect" id="singleSelect" ng-model="data.singleSelect">
<option value="">---Please select---</option> <!-- not selected / blank option -->
<option value="{{data.option1}}">Option 1</option> <!-- interpolation -->
<option value="option-2">Option 2</option>
</select><br>
<button ng-click="forceUnknownOption()">Force unknown option</button><br>
<tt>singleSelect = {{data.singleSelect}}</tt>
<hr>
<label for="multipleSelect"> Multiple select: </label><br>
<select name="multipleSelect" id="multipleSelect" ng-model="data.multipleSelect" multiple>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select><br>
<tt>multipleSelect = {{data.multipleSelect}}</tt><br/>
</form>
</div>
ngRepeat
to generate select
options
<div ng-controller="ExampleController">
<form name="myForm">
<label for="repeatSelect"> Repeat select: </label>
<select name="repeatSelect" id="repeatSelect" ng-model="data.repeatSelect">
<option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>
</form>
<hr>
<tt>repeatSelect = {{data.repeatSelect}}</tt><br/>
</div>
select
with ngOptions
and setting a default valueSee the ngOptions documentation for more ngOptions
usage examples.
<div ng-controller="ExampleController">
<form name="myForm">
<label for="mySelect">Make a choice:</label>
<select name="mySelect" id="mySelect"
ng-options="option.name for option in data.availableOptions track by option.id"
ng-model="data.selectedOption"></select>
</form>
<hr>
<tt>option = {{data.selectedOption}}</tt><br/>
</div>
select
to a non-string value via ngModel
parsing / formatting
<select ng-model="model.id" convert-to-number>
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
{{ model }}