Question

例如，在这样的代码中，如何检查复选框是否已选中并显示带有值总和的警报？复选框将比这两个更多。

<ion-list>

<ion-item>
<ion-label>Pepperoni</ion-label>
<ion-checkbox [(ngModel)]=“pepperoni” value=“3.5”
<ion-item>
<ion-label>Sausage< /ion-label>
<ion-checkbox [(ngModel)]=“sausage” value=“4.2”</ion-checkbox>
</ion-item>

<ion-row center>
<ion-col text-center>
<ion-button click=“getValue()”>Value<ion-button>
</ion-col>
</ion-row>
</ion-list>

Answer 1

HTML

<ion-content padding>


<ion-list>
  <ion-item *ngFor="let entry of form">
    <ion-label>{{entry.val}}</ion-label>
    <ion-checkbox slot="end" [(ngModel)]="entry.isChecked"></ion-checkbox>
  </ion-item>
</ion-list>


<button ion-button (click)="getValue()">Value</button>


</ion-content>

TS

public form = [
      { val: 'Pepperoni', isChecked: true,value:'3.2' },
      { val: 'Sausage', isChecked: false,value:'4.2' },
      { val: 'Mushroom', isChecked: false,value:'5.2' }
    ];

getValue(){

  let checkedControls = this.form.filter(result=>result.isChecked==true);
  let sum = 0;
  checkedControls.forEach(result=>{
    sum = parseFloat(result.value) + sum;
  });

  alert(sum);
}

工作演示：https://stackblitz.com/edit/ionic-icvos9

如何检查复选框是否被选中？以及如何求和一个值？

1 个答案: