HTML select
element with AngularJS 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. Value and textContent can be interpolated.
The select controller exposes utility functions that can be used to manipulate the select's behavior.
In general, the match between the model and an option is evaluated by strictly comparing the model value against the value of the available options.
If you are setting the option value with the option's value
attribute, or textContent, the value will always be a string
which means that the model value must also be a string. Otherwise the select
directive cannot match them correctly.
To bind the model to a non-string value, you can use one of the following strategies:
ngOptions
directive (select
)ngValue
directive, which allows arbitrary expressions to be option values (Example)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.
In many cases, ngRepeat
can be used on <option>
elements instead of ngOptions to achieve a similar result. However, ngOptions
provides some benefits:
<select>
's model is assigned via the select
as
part of the comprehension expressionSpecifically, select with repeated options slows down significantly starting at 2000 options in Chrome and Internet Explorer / Edge.
<select ng-model="string" [name="string"] [multiple="string"] [required="string"] [ng-required="string"] [ng-change="string"] [ng-options="string"] [ng-attr-size="string"]> ... </select>
Param | Type | Details |
---|---|---|
ngModel | string | Assignable AngularJS 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 | AngularJS 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 |
ngAttrSize (optional) | string | sets the size of the select element dynamically. Uses the ngAttr directive. |
See the ngOptions documentation for more ngOptions
usage examples.
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 3.0.
https://code.angularjs.org/1.8.2/docs/api/ng/directive/select