离子复选框任何人选择值

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 This.month，同时选择上一个month.and，也检查了两个值。我只需要检查上个月。

我该怎么做呢。

你能帮我..。

谢谢&致以问候。

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的官方文档。

希望这能有所帮助