Dart Documentationangular.directiveInputSelectDirective

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

NgAttachAware

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.

docs inherited from Object
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);
   });
 }
}