带有复选框的 Ionic2

Question

我可能听起来很老，但我是 ionic 2 的新手。我在 ionic 2 中为复选框写了一个代码，它运行良好，但我如何检索选中框的计数下面是我的代码。

checklist.ts代码

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

@Component({
  templateUrl: 'build/pages/checklist/checklist.html',
})

export class ChecklistPage {

  checklist:any;

  constructor(public nav: NavController, public navParams: NavParams) {
    this.checklist = this.navParams.get('checklist');
  }

  addItem(): void {

    let prompt = Alert.create({
      title: 'Add Item',
      message: 'Enter the name of the task for this checklist below:',
      inputs:[
        {
          name: 'name'
        }
      ],
      buttons:[
        {
          text: 'Cancel'
        },
        {
          text: 'Save',
          handler: data => {
            this.checklist.addItem(data.name);
          }
        }
      ]
    });

    this.nav.present(prompt);

  }

  toggleItem(item): void {

        this.checklist.toggleItem(item);
  }

  removeItem(item): void {

    this.checklist.removeItem(item);

  }

  renameItem(item): void {

    let prompt = Alert.create({
      title: 'Rename Item',
      message: 'Enter the new name of the task for this checklist below:',
      inputs: [
        {
          name: 'name'
        }
      ],
      buttons: [
        {
          text: 'Cancel'
        },
        {
          text: 'Save',
          handler: data => {
            this.checklist.renameItem(item,data.name);
          }
        }
      ]
    });

    this.nav.present(prompt);

  }

   checkallItems(): void {

    this.checklist.items.forEach((item) => {
      if(!item.checked){
        this.checklist.toggleItem(item);
      }
    });

  }
  uncheckItems(): void {

    this.checklist.items.forEach((item) => {
      if(item.checked){
        this.checklist.toggleItem(item);
      }
    });


  }

    }

checklist.html

<ion-header>
  <ion-navbar secondary>
    <ion-title>{{checklist.title}} #(checkeditem)/{{checklist.items.length}}</ion-title>
    <ion-buttons end>
      <button (click)="checkallItems()">
        <ion-icon name="checkbox"></ion-icon>
      </button>
      <button (click)="uncheckItems()">
        <ion-icon name="refresh-circle"></ion-icon>
      </button>
      <button (click)="addItem()">
        <ion-icon name="add-circle"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list no-lines>
    <ion-item-sliding *ngFor="let item of checklist.items" class="home-sliding-item">
      <ion-item>
        <ion-label>{{item.title}}</ion-label>
        <ion-checkbox [checked]="item.checked" (click)="toggleItem(item)" class="checklist-item"></ion-checkbox>
      </ion-item>
      <ion-item-options>
        <button light (click)="renameItem(item)">
          <ion-icon name="clipboard"></ion-icon>Edit
        </button>
        <button danger (click)="removeItem(item)">
          <ion-icon name="trash"></ion-icon>Delete
        </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>

Answer 1

您可以像这样在 ChecklistPage 中添加一个方法：

public getItemsCount(): number {
    let count= 0;
    for(let i=0; i<this.checklist.items.length; i++) {
        if(this.checklist.items[i].checked){
            count++;
        }    
    }
    return count;
}

或遵循 checkallItems() 方法：

public getItemsCount(): number {
    let count= 0;
    this.checklist.items.forEach((item) => {
        if(item.checked){
            count++;
        }
    });
    return count;
}

然后在您看来：

<ion-title>{{checklist.title}} #{{getItemsCount()}}/{{checklist.items.length}}</ion-title>

带有复选框的 Ionic2

Ionic2 with checkbox

ionic2

checklist.ts代码

checklist.html