Question

这是我的模板

<ion-list >
          <ion-item>
               <ion-label>This month</ion-label>
               <ion-checkbox checked=true></ion-checkbox>
         </ion-item>
         <ion-item>
               <ion-label>Previous month</ion-label>
               <ion-checkbox></ion-checkbox>
         </ion-item>
         <ion-item>
               <ion-label>last 3 month</ion-label>
               <ion-checkbox></ion-checkbox>
         </ion-item>
          <ion-item>
               <ion-label>This Year</ion-label>
               <ion-checkbox></ion-checkbox>
         </ion-item>
          <ion-item>
               <ion-label>Previous Year</ion-label>
               <ion-checkbox></ion-checkbox>
         </ion-item>
         <ion-item>
               <ion-label>All Time</ion-label>
               <ion-checkbox></ion-checkbox>
         </ion-item>
        </ion-list>

我选择任何一个ex.month和同一时间的值选择上个月。还检查了两个值。我只需要检查上个月。

我该怎么做。

你能帮助我......

谢谢＆amp;问候。

Answer 1

您可以使用复选框警报将多项选择的结果保存到变量。

在你的html中有一个调用你的功能的按钮

<button ion-button block (click)="selection()">Filter</button>

在.TS中处理警报显示和数据。

import { AlertController } from 'ionic-angular';

constructor(public alerts: AlertController){}

selection() {
    let a = this.alerts.create({
        title: 'My select',
        inputs: [
            { type: 'radio', label: 'This Month', value: 'This Month' },
            { type: 'radio', label: 'Previous Month', value: 'Previous Month' },
            { type: 'radio', label: 'Last 3 Months', value: 'Last 3 Months' },
            { type: 'radio', label: 'This Year', value: 'This Year' },
            { type: 'radio', label: 'Previous Year', value: 'Previous Year' },
            { type: 'radio', label: 'All Time', value: 'All Time' },
        ],
        buttons: [
            {
                text: 'Cancel', role: 'cancel'
            },
            {
                text: 'Ok',
                handler: data => {
                    // DATA IS AN STRING ONLY, IF YOU SELECT 'ALL TIME' THEN DATA WILL BE 'ALL TIME'
                }
            }]
    })

    a.present();
}

如果您需要在屏幕上显示此信息而不是提醒，请查看radio buttons的官方文档。

希望这有帮助

离子复选框任何人选择值

1 个答案: