diff --git a/ionic/components/alert/alert.ios.scss b/ionic/components/alert/alert.ios.scss
index 30db203697..21f1cdea64 100644
--- a/ionic/components/alert/alert.ios.scss
+++ b/ionic/components/alert/alert.ios.scss
@@ -81,6 +81,46 @@ ion-alert {
-webkit-appearance: none;
}
+.alert-radio {
+ display: flex;
+ min-height: $alert-ios-button-min-height;
+ border-top: 1px solid $alert-ios-button-border-color;
+ cursor: pointer;
+
+ &[aria-checked=true] {
+ color: $alert-ios-button-text-color;
+
+ .alert-radio-icon:after {
+ position: absolute;
+ border-width: 2px;
+ border-style: solid;
+ border-color: $alert-ios-button-text-color;
+ top: 13px;
+ left: 7px;
+ width: 4px;
+ height: 10px;
+ border-left: none;
+ border-top: none;
+ content: '';
+ transform: rotate(45deg);
+ }
+ }
+
+}
+
+.alert-radio-label {
+ flex: 1;
+ order: 0;
+ text-align: auto;
+ padding: 13px;
+}
+
+.alert-radio-icon {
+ position: relative;
+ order: 1;
+ min-width: 30px;
+}
+
.alert-button {
margin: 0;
flex: 1;
diff --git a/ionic/components/alert/alert.ts b/ionic/components/alert/alert.ts
index 7dd283437a..b730594bcf 100644
--- a/ionic/components/alert/alert.ts
+++ b/ionic/components/alert/alert.ts
@@ -1,5 +1,5 @@
import {Component, ElementRef, Renderer} from 'angular2/core';
-import {NgClass, NgIf, NgFor} from 'angular2/common';
+import {NgClass, NgSwitch, NgIf, NgFor} from 'angular2/common';
import {NavParams} from '../nav/nav-controller';
import {ViewController} from '../nav/view-controller';
@@ -183,13 +183,30 @@ export class Alert extends ViewController {
'
' +
- '
' +
- '' +
- '
' +
+ '
' +
+
+ '
' +
+ '' +
+ '
' +
+ '
' +
+ '
' +
+ '{{i.label}}' +
+ '
' +
+ '
' +
+ '
' +
+ '' +
+
+ '
' +
+ '' +
+ '
' +
+ '' +
+ '
' +
+ '
' +
+ '' +
+
'
' +
'
' +
- '
' +
@@ -197,7 +214,7 @@ export class Alert extends ViewController {
host: {
'role': 'dialog'
},
- directives: [NgClass, NgIf, NgFor]
+ directives: [NgClass, NgSwitch, NgIf, NgFor]
})
class AlertCmp {
@@ -214,7 +231,7 @@ class AlertCmp {
}
}
- click(button) {
+ btnClick(button) {
let shouldDismiss = true;
if (button.handler) {
@@ -233,11 +250,32 @@ class AlertCmp {
}
}
+ rbClick(checkedInput) {
+ this.d.inputs.forEach(input => {
+ input.checked = (checkedInput === input);
+ });
+
+ if (!this.d.buttons.length) {
+ // auto dismiss if no buttons
+ setTimeout(() => {
+ this.dismiss();
+ }, this._config.get('pageTransitionDelay'));
+ }
+ }
+
dismiss() {
this._viewCtrl.dismiss(this.getValues());
}
getValues() {
+ if (this.inputType === 'radio') {
+ // this is a radio button alert
+ // return the one radio button value which is checked
+ let checkedInput = this.d.inputs.find(input => input.checked);
+ return checkedInput ? checkedInput.value : undefined;
+ }
+
+ // return an object of all the values with the name as the key
let values = {};
this.d.inputs.forEach(input => {
values[input.name] = input.value;
@@ -247,22 +285,28 @@ class AlertCmp {
onPageLoaded() {
// normalize the data
- this.d.buttons = this.d.buttons.map(button => {
+ let data = this.d;
+
+ data.buttons = data.buttons.map(button => {
if (typeof button === 'string') {
return { text: button };
}
return button;
});
- this.d.inputs = this.d.inputs.map((input, index) => {
+ data.inputs = data.inputs.map((input, index) => {
return {
+ type: input.type || 'text',
name: isDefined(input.name) ? input.name : index,
placeholder: isDefined(input.placeholder) ? input.placeholder : '',
- type: input.type || 'text',
- value: isDefined(input.value) ? input.value : ''
- }
+ value: isDefined(input.value) ? input.value : '',
+ label: input.label,
+ checked: !!input.checked,
+ };
});
+ this.inputType = (data.inputs.length ? data.inputs[0].type : null);
+
let self = this;
self.keyUp = function(ev) {
if (ev.keyCode === 13) {
diff --git a/ionic/components/alert/test/basic/index.ts b/ionic/components/alert/test/basic/index.ts
index 64515192f3..3384da1b01 100644
--- a/ionic/components/alert/test/basic/index.ts
+++ b/ionic/components/alert/test/basic/index.ts
@@ -68,7 +68,7 @@ class E2EPage {
setTimeout(() => {
console.log('Prompt close');
- alert.close(data);
+ alert.dismiss(data);
}, 500);
return false;
@@ -92,6 +92,44 @@ class E2EPage {
});
}
+ doRadio() {
+ let alert = Alert.create();
+ alert.setTitle('Radio!');
+
+ alert.addInput({
+ type: 'radio',
+ label: 'Radio 1',
+ value: 'value1',
+ checked: true
+ });
+
+ alert.addInput({
+ type: 'radio',
+ label: 'Radio 2',
+ value: 'value2'
+ });
+
+ alert.addInput({
+ type: 'radio',
+ label: 'Radio 3',
+ value: 'value3'
+ });
+
+ alert.addButton('Cancel');
+ alert.addButton({
+ text: 'Ok',
+ handler: data => {
+ console.log('Select data:', data);
+ this.testRadioOpen = false;
+ this.testRadioResult = data;
+ }
+ });
+
+ this.nav.present(alert).then(() => {
+ this.testRadioOpen = true;
+ });
+ }
+
}
diff --git a/ionic/components/alert/test/basic/main.html b/ionic/components/alert/test/basic/main.html
index 14b8b911cb..d96c13930b 100644
--- a/ionic/components/alert/test/basic/main.html
+++ b/ionic/components/alert/test/basic/main.html
@@ -5,15 +5,18 @@
- Alert
- Confirm
- Prompt
+ Alert
+ Confirm
+ Prompt
+ Radio
Confirm Opened: {{testConfirmOpen}}
Confirm Result: {{testConfirmResult}}
Prompt Opened: {{testPromptOpen}}
Prompt Result: {{testPromptResult | json}}
+ Radio Opened: {{testRadioOpen}}
+ Radio Result: {{testRadioResult}}