View source Improve this doc

select
directive in module ng

Description

HTML SELECT element with angular data-binding.

ngOptions

Optionally ngOptions attribute can be used to dynamically generate a list of <option> elements for a <select> element using an array or an object obtained by evaluating the ngOptions expression.

When an item in the <select> menu is selected, the value of array element or object property represented by the selected option will be bound to the model identified by the ngModel directive of the parent select element.

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 null or "not selected" option. See example below for demonstration.

Note: ngOptions provides iterator facility for <option> element which should be used instead of ngRepeat when you want the select model to be bound to a non-string value. This is because an option element can currently be bound to string values only.

Usage

This directive can be used as custom element, but be aware of IE restrictions.

as element:
<select
       ngModel="{string}"
       [name="{string}"]
       [required]
       [ngRequired="{string}"]
       [ngOptions="{comprehension_expression}"]>
</select>

Parameters

ParamTypeDetails
ngModelstring

Assignable angular expression to data-bind to.

name
(optional)
string

Property name of the form under which the control is published.

required
(optional)
string

The control is considered valid only if value is 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.

ngOptions
(optional)
comprehension_expression

in one of the following forms:

  • for array data sources:
    • label for value in array
    • select as label for value in array
    • label group by group for value in array
    • select as label group by group for value in array track by trackexpr
  • for object data sources:
    • label for (key , value) in object
    • select as label for (key , value) in object
    • label group by group for (key, value) in object
    • select as label group by group for (key, value) in object

Where:

  • array / object: an expression which evaluates to an array / object to iterate over.
  • value: local variable which will refer to each item in the array or each property value of object during iteration.
  • key: local variable which will refer to a property name in object during iteration.
  • label: The result of this expression will be the label for <option> element. The expression will most likely refer to the value variable (e.g. value.propertyName).
  • select: The result of this expression will be bound to the model of the parent <select> element. If not specified, select expression will default to value.
  • group: The result of this expression will be used to group options using the <optgroup> DOM element.
  • trackexpr: Used when working with an array of objects. The result of this expression will be used to identify the objects in the array. The trackexpr will most likely refer to the value variable (e.g. value.propertyName).

Example

Source




















Demo