Improve this Doc View Source select

  1. directive in module ng

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. For dynamic options, use interpolation inside the value attribute or the textContent. Using ngValue is also possible (as it sets the value attribute), and will take precedence over value and textContent.

Note that the value of a 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.

In many cases, 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.

Directive Info

  • This directive executes at priority level 0.

Usage

  • as element: 
    <select
  ng-model="string"
  [name="string"]
  [multiple="string"]
  [required="string"]
  [ng-required="string"]
  [ng-change="string"]
  [ng-options="string"]>
...
</select>

Arguments

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 required validation error key if the value is not entered.
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 ngOptions.

Simple select elements with static options

Using ngRepeat to generate select options

Using select with ngOptions and setting a default value

See the ngOptions documentation for more ngOptions usage examples.

Binding select to a non-string value via ngModel parsing / formatting

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.5.11/docs/api/ng/directive/select