javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(toggle): use value accessor provider

Browse Source 
Remove the value property and always recommend ngModel or ngControl.
Closes #5425
This commit is contained in:
Adam Bradley
2016-02-13 00:32:08 -06:00
parent dafa400230
commit 5034c1d729
3 changed files with 109 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
ionic/components/toggle/test/basic/index.ts
View File

@@ -15,6 +15,12 @@ import {
templateUrl: 'main.html'
})
class E2EApp {
fruitsForm: ControlGroup;
grapeDisabled: boolean;
kiwiModel: boolean;
strawberryModel: boolean;
formResults: string;
constructor() {
this.fruitsForm = new ControlGroup({
"appleCtrl": new Control(),
@@ -24,13 +30,13 @@ class E2EApp {
});
this.grapeDisabled = true;
this.grapeChecked = true;
this.myModel = true;
this.kiwiModel = false;
this.strawberryModel = true;
}
toggleGrapeChecked() {
this.grapeChecked = !this.grapeChecked;
this.fruitsForm.controls['grapeCtrl'].updateValue( !this.fruitsForm.controls['grapeCtrl'].value )
}
toggleGrapeDisabled() {

26
ionic/components/toggle/test/basic/main.html
View File

@@ -1,7 +1,6 @@
<ion-toolbar><ion-title>Toggles</ion-title></ion-toolbar>
<ion-content>
<form (submit)="doSubmit($event)" [ngFormModel]="fruitsForm">
@@ -9,33 +8,33 @@
<ion-list>
<ion-item>
<ion-label>Apple, value=apple, init checked</ion-label>
<ion-toggle value="apple" checked="true" ngControl="appleCtrl"></ion-toggle>
<ion-label>Apple, ngControl</ion-label>
<ion-toggle ngControl="appleCtrl"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Banana, init no checked/value attributes</ion-label>
<ion-label>Banana, ngControl</ion-label>
<ion-toggle ngControl="bananaCtrl"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Cherry, value=cherry, init disabled</ion-label>
<ion-toggle value="cherry" disabled="true" ngControl="cherryCtrl"></ion-toggle>
<ion-label>Cherry, ngControl, disabled</ion-label>
<ion-toggle disabled="true" ngControl="cherryCtrl"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Grape, value=grape, init checked, disabled</ion-label>
<ion-toggle value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ngControl="grapeCtrl"></ion-toggle>
<ion-label>Grape, ngControl, checked, disabled</ion-label>
<ion-toggle [disabled]="grapeDisabled" ngControl="grapeCtrl"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Secondary color</ion-label>
<ion-toggle secondary checked="true"></ion-toggle>
<ion-label>Kiwi, NgModel false, Secondary color</ion-label>
<ion-toggle secondary [(ngModel)]="kiwiModel"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>I'm an NgModel</ion-label>
<ion-toggle value="apple" checked="true" [(ngModel)]="myModel"></ion-toggle>
<ion-label>Strawberry, NgModel true</ion-label>
<ion-toggle [(ngModel)]="strawberryModel"></ion-toggle>
</ion-item>
</ion-list>
@@ -57,7 +56,8 @@
<code>cherry.value: {{fruitsForm.controls.cherryCtrl.value}}</code><br>
<code>grape.dirty: {{fruitsForm.controls.grapeCtrl.dirty}}</code><br>
<code>grape.value: {{fruitsForm.controls.grapeCtrl.value}}</code><br>
<code>ngModel.value: {{myModel}}</code><br>
<code>kiwiModel: {{kiwiModel}}</code><br>
<code>strawberryModel: {{strawberryModel}}</code><br>
</p>
<pre aria-hidden="true" padding>{{formResults}}</pre>