feat(select): emit change and select events

Closes #5219

ionic/components/option/option.ts

@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Input} from 'angular2/core';
+import {Directive, ElementRef, Input, Output, EventEmitter} from 'angular2/core';
 
 import {isDefined, isTrueProperty} from '../../util/util';
 
@@ -12,6 +12,8 @@ export class Option {
   private _checked: any = false;
   private _value;
 
+  @Output() select: EventEmitter<any> = new EventEmitter();
+
   constructor(private _elementRef: ElementRef) {}
 
   @Input()

ionic/components/select/select.ts

@@ -1,4 +1,4 @@
-import {Component, Optional, ElementRef, Renderer, Input, HostListener, ContentChildren, QueryList} from 'angular2/core';
+import {Component, Optional, ElementRef, Renderer, Input, Output, EventEmitter, HostListener, ContentChildren, QueryList} from 'angular2/core';
 import {NgControl} from 'angular2/common';
 
 import {Alert} from '../alert/alert';
@@ -124,6 +124,8 @@ export class Select {
   @Input() disabled: boolean = false;
   @Input() multiple: string = '';
 
+  @Output() change: EventEmitter<any> = new EventEmitter();
+
   @ContentChildren(Option) options: QueryList<Option>;
 
   constructor(
@@ -162,6 +164,7 @@ export class Select {
       if (option.checked) {
         selectedValues.push( isDefined(option.value) ? option.value : option.text );
         selectedTexts.push(option.text);
+        option.select.emit(option.value);
       }
     });
 
@@ -227,6 +230,7 @@ export class Select {
             if (selectedValues.indexOf(option.value) > -1) {
               // this option is one that was checked
               option.checked = true;
+              option.select.emit(option.value);
               selectedTexts.push(option.text);
 
             } else {
@@ -238,6 +242,7 @@ export class Select {
           this.text = selectedTexts.join(', ');
 
           this.onChange(selectedValues);
+          this.change.emit(selectedValues);
         }
       });
 
@@ -257,6 +262,7 @@ export class Select {
             if (option.value === selectedValue) {
               // this option was the one that was checked
               option.checked = true;
+              option.select.emit(option.value);
               this.text = option.text;
 
             } else {
@@ -266,6 +272,7 @@ export class Select {
           });
 
           this.onChange(selectedValue);
+          this.change.emit(selectedValue);
         }
       });
     }
@@ -288,16 +295,12 @@ export class Select {
   /**
    * @private
    */
-  onChange(val) {
+  onChange(val) {}
-    // TODO: figure the whys and the becauses
-  }
 
   /**
    * @private
    */
-  onTouched(val) {
+  onTouched(val) {}
-    // TODO: figure the whys and the becauses
-  }
 
   /**
    * @private

ionic/components/select/test/multiple-value/index.ts

@@ -4,7 +4,13 @@ import {App, Page} from 'ionic/ionic';
 @Page({
   templateUrl: 'main.html'
 })
-class E2EPage {}
+class E2EPage {
+
+  carChange(selectedValues) {
+    console.log('carChange', selectedValues);
+  }
+
+}
 
 
 @App({

ionic/components/select/test/multiple-value/main.html

@@ -22,7 +22,7 @@
 
   <ion-item>
     <ion-label>Car Options</ion-label>
-    <ion-select [(ngModel)]="carOptions" multiple="true">
+    <ion-select [(ngModel)]="carOptions" multiple="true" (change)="carChange($event)">
       <ion-option value="backupcamera">Backup Camera</ion-option>
       <ion-option value="heatedseats">Headted Seats</ion-option>
       <ion-option value="keyless">Keyless Entry</ion-option>

ionic/components/select/test/single-value/index.ts

@@ -11,6 +11,10 @@ class E2EPage {
       subTitle: 'Select your favorite'
     };
   }
+
+  stpSelect() {
+    console.log('STP selected')
+  }
 }
 
 

ionic/components/select/test/single-value/main.html

@@ -46,7 +46,7 @@
       <ion-option>Pearl Jam</ion-option>
       <ion-option>Smashing Pumpkins</ion-option>
       <ion-option>Soundgarden</ion-option>
-      <ion-option>Stone Temple Pilots</ion-option>
+      <ion-option (select)="stpSelect()">Stone Temple Pilots</ion-option>
     </ion-select>
   </ion-item>