How to set condition for function call on checkbox click

Question

I have a table which consists of columns named NoBill and Bill which has checkbox as values.

Table default view

When NoBill checkbox gets clicked once totale(this.totale) value gets calculated.

Totale value at top after two checkbox clicked in nobill column

When Bill column checkbox gets clicked once total(this.total) value gets calculated. It also opens two new columns named Ratio and Revasst.

Total value at top and ratio calculation here

The formula for getting value for Ratio is (total/totale). For example if total is 110 and if totale is 100 then the ratio is 110/100=1.1.

So when I click the same Bill column checkbox repeatedly (2 times to enable and disable) the value total(this.total) gets repeatedly calculated. So now the total value gets updated from 110 to 120. So because of that the Ratio value gets changed to 1.2 as now its 120/100 instead of 110/100. This is the issue I am facing. I just want the total value to be calculated only once for a single checkbox click. So that it stays 110 for that checkbox click even though its clicked multiple times.

Ratio value change after clicking same checkbox value repeatedly

My stackblitz link

Answer 1

I think that you has severals variables, this make difficult to check.

Imagine you has a function like

  calculateTotals()
  {
    const items=this.listes.filter(x=>x.nobillChecked || x.billChecked)
    const total=items.length?items.map(x=>x.qty*x.value).reduce((totals, data) => totals + data):0

    const items2=this.listes.find(x=>x.billChecked)?this.listes.filter(x=>x.nobillChecked):[]
    const totale=items2.length?items2.map(x=>x.qty*x.value).reduce((totals, data) => totals + data):0
    const factor=totale && total?total/totale:0
    return [total,totale,factor]
  }

See that this function only depend from the values of "listes" and don't change any value

you can use in your .html some like

            <tr *ngFor="let list of listes; index as i">
                <td>{{list.name}}</td>
                <td>{{list.qty}}</td>
                <td>{{list.value}}</td>
                <ng-container *ngIf="factor">
                    <td>
                        <div *ngIf="list.nobillChecked;">{{ factor|number:'1.0-2' }}</div>
                    </td>
                    <td>
                        <div *ngIf="list.nobillChecked;">{{list.value*factor|number:'1.0-2' }}</div>
                    </td>
                    <td>
                        <div>
                            {{list.nobillChecked?(list.qty*factor*list.value|number:'1.0-2'):''}}
                        </div>
                    </td>
                </ng-container>
                <td *ngIf="!factor">
                    <div>
                        {{list.nobillChecked?(list.qty*list.value|number:'1.0-2'):''}}
                    </div>
                </td>
                <td>
                    <input type="checkbox" id="vehicle3" name="vehicle3" value="Bikee"
      [disabled]="list.billChecked"
      [(ngModel)]="list.nobillChecked"
      (change)="recalculate()"
    >
  </td>
                <td>
                    <input type="checkbox" id="vehicle2" name="vehicle2" value="Bikes"
      [disabled]="list.nobillChecked"
      [(ngModel)]="list.billChecked"
      (change)="recalculate()"
    >
  </td>
            </tr>

Again, take account the values only depending form "list", "factor", "total" and "totale". You can, in (change) simply calculate again the values

  recalculate() {
    [this.totale,this.total,this.factor]=this.calculateTotals()
  }

(I use the "destructuring" to give value to the three variables). Well, the function return an array, with destructuring give value to the variables.

I don't prety sure make it correcttly in the stackblitz, but think that less variables and less variables to acumulate, makes the things more easy to check. And yes, can look that "recalculate" all is not very good when we thnking in performance. Really the time to spend in "recalculate" all it's not significance, and make the code more "robust"