HTML SELECT
element with angular data-binding.
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.
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.
If the viewValue contains a value that doesn't match any of the options then the control will automatically add an "unknown" option, which it then removes when this 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.
select
directive used without ngOptions
is always a string.
When the model needs to be bound to a non-string value, you must either explictly 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.
select
to a non-string value)
<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 }}
angular.module('nonStringSelect', [])
.run(function($rootScope) {
$rootScope.model = { id: 2 };
})
.directive('convertToNumber', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
ngModel.$parsers.push(function(val) {
return parseInt(val, 10);
});
ngModel.$formatters.push(function(val) {
return '' + val;
});
}
};
});
it('should initialize to model', function() {
var select = element(by.css('select'));
expect(element(by.model('model.id')).$('option:checked').getText()).toEqual('Two');
});
<select>
...
</select>