HTML SELECT
element with angular data-binding.
ngOptions
The ngOptions
attribute can be used to dynamically generate a list of <option>
elements for the <select>
element using the array or object obtained by evaluating the
ngOptions
comprehension expression.
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 reducing memory and
increasing speed by not creating a new scope for each repeated instance, as well as providing
more flexibility in how the <select>
's model is assigned via the select
as
part of the
comprehension expression. ngOptions
should be used when the <select>
model needs to be bound
to a non-string value. This is because an option element can only be bound to string values at
present.
When an item in the <select>
menu is selected, the array element or object property
represented by the selected option will be bound to the model identified by the ngModel
directive.
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.
ngModel
compares by reference, not value. This is important when binding to an
array of objects. See an example in this jsfiddle.
select
as
Using select
as
will bind the result of the select
expression to the model, but
the value of the <select>
and <option>
html elements will be either the index (for array data sources)
or property name (for object data sources) of the value within the collection. If a track by
expression
is used, the result of that expression will be set as the value of the option
and select
elements.
select
as
and track by
select
as
and track by
in the same expression. They are not designed to work together.
Consider the following example:
<select ng-options="item.subItem as item.label for item in values track by item.id" ng-model="selected">
$scope.values = [{
id: 1,
label: 'aLabel',
subItem: { name: 'aSubItem' }
}, {
id: 2,
label: 'bLabel',
subItem: { name: 'bSubItem' }
}];
$scope.selected = { name: 'aSubItem' };
With the purpose of preserving the selection, the track by
expression is always applied to the element
of the data source (to item
in this example). To calculate whether an element is selected, we do the
following:
track by
to the elements in the array. In the example: [1, 2]
track by
to the already selected value in ngModel
.
In the example: this is not possible as track by
refers to item.id
, but the selected
value from ngModel
is {name: 'aSubItem'}
, so the track by
expression is applied to
a wrong object, the selected element can't be found, <select>
is always reset to the "not
selected" option.<select
ng-model=""
[name=""]
[required=""]
[ng-required=""]
[ng-options=""]>
...
</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. |
required
(optional)
|
string |
The control is considered valid only if value is entered. |
ngRequired
(optional)
|
string |
Adds |
ngOptions
(optional)
|
comprehension_expression |
in one of the following forms:
Where:
|
<script>
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.colors = [
{name:'black', shade:'dark'},
{name:'white', shade:'light'},
{name:'red', shade:'dark'},
{name:'blue', shade:'dark'},
{name:'yellow', shade:'light'}
];
$scope.myColor = $scope.colors[2]; // red
}]);
</script>
<div ng-controller="ExampleController">
<ul>
<li ng-repeat="color in colors">
Name: <input ng-model="color.name">
[<a href ng-click="colors.splice($index, 1)">X</a>]
</li>
<li>
[<a href ng-click="colors.push({})">add</a>]
</li>
</ul>
<hr/>
Color (null not allowed):
<select ng-model="myColor" ng-options="color.name for color in colors"></select><br>
Color (null allowed):
<span class="nullable">
<select ng-model="myColor" ng-options="color.name for color in colors">
<option value="">-- choose color --</option>
</select>
</span><br/>
Color grouped by shade:
<select ng-model="myColor" ng-options="color.name group by color.shade for color in colors">
</select><br/>
Select <a href ng-click="myColor = { name:'not in list', shade: 'other' }">bogus</a>.<br>
<hr/>
Currently selected: {{ {selected_color:myColor} }}
<div style="border:solid 1px black; height:20px"
ng-style="{'background-color':myColor.name}">
</div>
</div>
it('should check ng-options', function() {
expect(element(by.binding('{selected_color:myColor}')).getText()).toMatch('red');
element.all(by.model('myColor')).first().click();
element.all(by.css('select[ng-model="myColor"] option')).first().click();
expect(element(by.binding('{selected_color:myColor}')).getText()).toMatch('black');
element(by.css('.nullable select[ng-model="myColor"]')).click();
element.all(by.css('.nullable select[ng-model="myColor"] option')).first().click();
expect(element(by.binding('{selected_color:myColor}')).getText()).toMatch('null');
});