离子切换如何工作

时间:2017-02-06 22:36:05

标签: javascript angular ionic-framework

Ionic 2 Documentation并没有真正解释如何使用ion-toggle。我想将On Checkbox / Toggle中的值带到下一页/状态。

请帮助理解。

打字稿

import { Component } from '@angular/core';
import { NavController, NavParams, LoadingController } from 'ionic-angular';

import { Apis } from '../../app/apis';
import { BookingConfirmationPage } from '../booking-confirmation/booking-confirmation';

@Component({
  selector: 'page-booking-enhancement',
  templateUrl: 'booking-enhancement.html',
  providers: [Apis]
})
export class BookingEnhancementPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public loadingCtrl: LoadingController, public Apis: Apis ) {

  }

}

HTML

<ion-grid>
    <ion-row *ngFor="let item of extra" class="row-extra">
        <ion-col width-10>
            <ion-toggle class="switcher display-block" color="secondary"></ion-toggle>
        </ion-col>
        <ion-col width-67 class="description">{{ item.description }}</ion-col>
        <ion-col width-23 style="text-align: right;">
            <div class="rate text-center display-block">${{ item.rate }}</div>
            <div class="qty text-center display-block"><input type="number" class="text-center"/></div>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            <ion-col width-100 class="text-center"><button type="submit" class="continue" (click)="ContinueBookingConfirmation()">Continue</button></ion-col>
        </ion-col>
    </ion-row>
</ion-grid>

0 个答案:

没有答案