fix(select): support objects as select values

Closes #4843

Closes #7842

modules/angular2/src/common/forms/directives/select_control_value_accessor.ts

@@ -1,21 +1,78 @@
 import {
-  Query,
   Directive,
   Renderer,
-  Self,
   forwardRef,
   Provider,
   ElementRef,
-  QueryList
+  Input,
+  Host,
+  OnDestroy,
+  Optional
 } from 'angular2/core';
-
-import {ObservableWrapper} from 'angular2/src/facade/async';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from './control_value_accessor';
-import {CONST_EXPR} from 'angular2/src/facade/lang';
+import {
+  CONST_EXPR,
+  StringWrapper,
+  isPrimitive,
+  isPresent,
+  looseIdentical
+} from 'angular2/src/facade/lang';
+
+import {MapWrapper} from 'angular2/src/facade/collection';
 
 const SELECT_VALUE_ACCESSOR = CONST_EXPR(new Provider(
     NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => SelectControlValueAccessor), multi: true}));
 
+function _buildValueString(id: string, value: any): string {
+  if (!isPrimitive(value)) value = "Object";
+  return StringWrapper.slice(`${id}: ${value}`, 0, 50);
+}
+
+function _extractId(valueString: string): string {
+  return valueString.split(":")[0];
+}
+
+/**
+ * The accessor for writing a value and listening to changes on a select element.
+ */
+@Directive({
+  selector: 'select[ngControl],select[ngFormControl],select[ngModel]',
+  host: {'(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
+  providers: [SELECT_VALUE_ACCESSOR]
+})
+export class SelectControlValueAccessor implements ControlValueAccessor {
+  value: any;
+  _optionMap: Map<string, any> = new Map<string, any>();
+  _idCounter: number = 0;
+
+  onChange = (_: any) => {};
+  onTouched = () => {};
+
+  constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
+
+  writeValue(value: any): void {
+    this.value = value;
+    var valueString = _buildValueString(this._getOptionId(value), value);
+    this._renderer.setElementProperty(this._elementRef.nativeElement, 'value', valueString);
+  }
+
+  registerOnChange(fn: (value: any) => any): void {
+    this.onChange = (valueString: string) => { fn(this._getOptionValue(valueString)); };
+  }
+  registerOnTouched(fn: () => any): void { this.onTouched = fn; }
+
+  _registerOption(): string { return (this._idCounter++).toString(); }
+
+  _getOptionId(value: any): string {
+    for (let id of MapWrapper.keys(this._optionMap)) {
+      if (looseIdentical(this._optionMap.get(id), value)) return id;
+    }
+    return null;
+  }
+
+  _getOptionValue(valueString: string): any { return this._optionMap.get(_extractId(valueString)); }
+}
+
 /**
  * Marks `<option>` as dynamic, so Angular can be notified when options change.
  *
@@ -28,36 +85,30 @@ const SELECT_VALUE_ACCESSOR = CONST_EXPR(new Provider(
  * ```
  */
 @Directive({selector: 'option'})
-export class NgSelectOption {
-}
+export class NgSelectOption implements OnDestroy {
+  id: string;
 
-/**
- * The accessor for writing a value and listening to changes on a select element.
- */
-@Directive({
-  selector: 'select[ngControl],select[ngFormControl],select[ngModel]',
-  host: {'(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
-  bindings: [SELECT_VALUE_ACCESSOR]
-})
-export class SelectControlValueAccessor implements ControlValueAccessor {
-  value: string;
-  onChange = (_: any) => {};
-  onTouched = () => {};
-
-  constructor(private _renderer: Renderer, private _elementRef: ElementRef,
-              @Query(NgSelectOption, {descendants: true}) query: QueryList<NgSelectOption>) {
-    this._updateValueWhenListOfOptionsChanges(query);
+  constructor(private _element: ElementRef, private _renderer: Renderer,
+              @Optional() @Host() private _select: SelectControlValueAccessor) {
+    if (isPresent(this._select)) this.id = this._select._registerOption();
   }
 
-  writeValue(value: any): void {
-    this.value = value;
-    this._renderer.setElementProperty(this._elementRef.nativeElement, 'value', value);
+  @Input()
+  set value(value: any) {
+    if (this._select == null) return;
+    this._select._optionMap.set(this.id, value);
+    this._setElementValue(_buildValueString(this.id, value));
+    this._select.writeValue(this._select.value);
   }
 
-  registerOnChange(fn: () => any): void { this.onChange = fn; }
-  registerOnTouched(fn: () => any): void { this.onTouched = fn; }
+  _setElementValue(value: string): void {
+    this._renderer.setElementProperty(this._element.nativeElement, 'value', value);
+  }
 
-  private _updateValueWhenListOfOptionsChanges(query: QueryList<NgSelectOption>) {
-    ObservableWrapper.subscribe(query.changes, (_) => this.writeValue(this.value));
+  ngOnDestroy() {
+    if (isPresent(this._select)) {
+      this._select._optionMap.delete(this.id);
+      this._select.writeValue(this._select.value);
+    }
   }
 }