离子复选框任何人选择值

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>

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

我该怎么做。

你能帮我吗？

谢谢问候。

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();
}

如果您在屏幕上需要此问题，而不是作为警报形式，请检查官方文档中的广播按钮。

希望这有帮助