InputSelectDirective class
HTML SELECT
element with angular data-binding if used with NgModelDirective
.
The NgModelDirective
will receive the currently selected item. The binding is
performed on the OPTION
.value
property.
An empty OPTION
.value
is treated as null.
If you the model contains value which does not map to any OPTION
then a new
unknown OPTION
is inserted into the list. Once the model points to an existing
OPTION
the unknown OPTION
is removed.
Becouse OPTION
.value
attribute is a string, the model is bound to a string.
If there is need to bind to an object then OptionValueDirective should be used.
@NgDirective( selector: 'select[ng-model]', visibility: NgDirective.CHILDREN_VISIBILITY ) class InputSelectDirective implements NgAttachAware { final Expando<OptionValueDirective> expando = new Expando<OptionValueDirective>(); final dom.SelectElement _selectElement; final NodeAttrs _attrs; final NgModel _model; final Scope _scope; final dom.OptionElement _unknownOption = new dom.OptionElement(); dom.OptionElement _nullOption; _SelectMode _mode = new _SelectMode(null, null, null); bool _dirty = false; InputSelectDirective(dom.Element this._selectElement, NodeAttrs this._attrs, NgModel this._model, Scope this._scope) { _unknownOption.value = '?'; _selectElement.queryAll('option').forEach((o) { if (_nullOption == null && o.value == '') { _nullOption = o; } }); } attach() { _attrs.observe('multiple', (value) { _mode.destroy(); if (value == null) { _model.watchCollection = false; _mode = new _SingleSelectMode(expando, _selectElement, _model, _nullOption, _unknownOption); } else { _model.watchCollection = true; _mode = new _MultipleSelectionMode(expando, _selectElement, _model); } _mode.onModelChange(_model.viewValue); }); _selectElement.onChange.listen((event) => _mode.onViewChange(event)); _model.render = (value) => _mode.onModelChange(value); } /** * This method invalidates the current state of the selector and forces a rerendering of the * options using the [Scope.$evalAsync]. */ dirty() { if (!_dirty) { _dirty = true; _scope.$evalAsync(() { _dirty = false; _mode.onModelChange(_model.viewValue); }); } } }
Implements
Constructors
new InputSelectDirective(Element _selectElement, NodeAttrs _attrs, NgModel _model, Scope _scope) #
Creates a new Object instance.
Object instances have no meaningful state, and are only useful through their identity. An Object instance is equal to itself only.
InputSelectDirective(dom.Element this._selectElement, NodeAttrs this._attrs, NgModel this._model, Scope this._scope) { _unknownOption.value = '?'; _selectElement.queryAll('option').forEach((o) { if (_nullOption == null && o.value == '') { _nullOption = o; } }); }
Properties
final Expando<OptionValueDirective> expando #
final Expando<OptionValueDirective> expando = new Expando<OptionValueDirective>()
Methods
dynamic attach() #
attach() { _attrs.observe('multiple', (value) { _mode.destroy(); if (value == null) { _model.watchCollection = false; _mode = new _SingleSelectMode(expando, _selectElement, _model, _nullOption, _unknownOption); } else { _model.watchCollection = true; _mode = new _MultipleSelectionMode(expando, _selectElement, _model); } _mode.onModelChange(_model.viewValue); }); _selectElement.onChange.listen((event) => _mode.onViewChange(event)); _model.render = (value) => _mode.onModelChange(value); }
dynamic dirty() #
This method invalidates the current state of the selector and forces a rerendering of the options using the Scope.$evalAsync.
dirty() { if (!_dirty) { _dirty = true; _scope.$evalAsync(() { _dirty = false; _mode.onModelChange(_model.viewValue); }); } }