Environment:

Ionic: 6.20.1
Angular CLI: 10.0.8
I am working on a mobile application to control expenses, implementing a function that calculates how much should be spent in a category of spending (eg how much should be spent on the home).

Problem:

I have a list of checkboxes that the user selects as desired. These correspond to spending categories (eg home ❏, study ❏, entertainment ❏) which are related. For example, the category "Home 15%" is related to the category "Purchases 6%", this is done so that if a category is deactivated, its percentage goes to the related category (If home is deactivated, purchases would become 21 %) This selection is saved to the database and retrieved to check the status, thereby establishing a recommended spend percentage value.

What I want to do:

As I mentioned, if a category is deactivated, its value passes to the next one. With this, I would like to know how to fulfill the following conditions:

If a category is disabled (false), its value is passed to its related category.
If two categories that are related are deactivated, their value would go to a third related category (eg "home 15%" is deactivated, "shopping 6%" is deactivated, its value would go to "food -> 49%").
If three related categories are disabled, pass part of its value to savings (which is worth 10% of the total) and another part to another category. (eg "household 15%" is off, "shopping 6%" is off, "food 28%" is off, this adds up to 49%, of which 20 would go to savings [saving 30%] and 29% to another category called "others" [with a value of 5% + 29% = 34%])
The solution I have found:

What I have done is to make conditions encompassing all the categories and checking that if one is false, it remains at 0 and its value passes to its related category.

/* In this example, if home is false, its value is passed to its relative without affecting the default value of the other categories that are not being affected */

            if (i.home== false && i.shopping == true && i.food == true && i.others == true &&
                i.pets == true && i.debts == true && i.subscription == true && i.transportation == true &&
                i.education == true && i.entertainment == true) {
                this.sumaCatPurchases = (this.sumaTotalIncomes * 0.21).toFixed(2); // Here I assign the recommended percentage of the total
                this.sumaCatFood = (this.sumaTotalIncomes * 0.28).toFixed(2);
                this.sumaCatOthers = (this.sumaTotalIncomes * 0.05).toFixed(2);
                this.sumaCatPets = (this.sumaTotalIncomes * 0.05).toFixed(2);
                this.sumaCatDebts = (this.sumaTotalIncomes * 0.05).toFixed(2);
                this.sumaCatSubscription = (this.sumaTotalIncomes * 0.04).toFixed(2);
                this.sumaCatTransportation = (this.sumaTotalIncomes * 0.08).toFixed(2);
                this.sumaCatEducation = (this.sumaTotalIncomes * 0.05).toFixed(2);
                this.sumaCatEntertainment = (this.sumaTotalIncomes * 0.05).toFixed(2);
            }

This is how I do it for each situation, only changing the true value to false and leaving the rest of the categories with their normal value so that they are not affected.
The problem with this method is that you have to set all the values of the other categories (which is a lot of code) and if I want to deselect more than one, I have to write all this for each situation, also if I want to cover all the situations ( I have deselected 1, 2, 3 or 4 categories) the scenarios I would have to do would be inhumane (like 2.3041802e+47 according to combinatorial theory) doing one by one. I don't know how I could cover this.
I'm very sorry for so much text, but it's a broad topic that I don't know how to cover. I would really appreciate someone to give me a way or advice on what I could do in this situation. Thanks in advance

checkBoxChanged(id: number, event: CustomEvent){ isChecked[id] = event.detail.checked; if(event.detail.checked === false){ //add the percentage value to the next checked related item, for example: if(nextAvailableRelated(id) >= 0){ itemsPercentageValues[nextAvailableRelated(id)] += itemsPercentageValues[id]; //update the current value of next one: itemsCurrentValues[nextAvailableRelated(id)] = itemsPercentageValues[nextAvailableRelated(id)]*sumaTotalIncome; } //remove the percentage value from this item: itemsPercentageValues[id] = 0; //then update the current values: itemsCurrentValues[id] = itemsPercentageValues[id]*sumaTotalIncome; } else{ //decrease the percentage value from the next checked related item, for example: if(nextAvailableRelated(id) >= 0){ itemsPercentageValues[nextAvailableRelated(id)] -= itemsBaseValues[id] //update the current value of next one: itemsCurrentValues[nextAvailableRelated(id)] = itemsPercentageValues[nextAvailableRelated(id)]*sumaTotalIncome; } //regain the percentage value from this item: itemsPercentageValues[id] = itemsBaseValues[id] + previousUncheckedValuesSum(id); //then update the current values: itemsCurrentValues[id] = itemsPercentageValues[id]*sumaTotalIncome; } } //this function recursively computes the percentage values of unchecked items before this item in the chain of relation previousUncheckedValuesSum(id){ if(previousItem(id) < 0 || isChecked[previousItem(id)] === true){ return 0; } else{ return previousUncheckedValuesSum(previousItem(id)) + itemsBaseValues(previousItem(id)); } }

1条答案

按热度按时间

oknwwptz1#

If I understand correctly, you have something like an ordered list of stuff with percentages, whenever one of them gets unchecked, it's percentage would be added to the next checked one and values would be redistributed with respect to their new percentages.
one way to handle it is to work with events. if you are using ion-checkbox you can listen to checkbox changes with ionChange event. in this sense, whenever a checkbox is unchecked you can find the next related item that is checked and give the first checkbox's percentage value to the second one and then update the values according to the percentages. and whenever it's checked you can recursively search for previous items that are unchecked and add their values to this one.
here is an example of how you can do it.

html of first item:

<ion-checkbox (ionChange)="checkBoxChanged(1, $event)"></ion-checkbox>
<ion-label>home: {{itemsCurrentValues[1]}}</ion-label>

typescript:

here itemsPercentageValues holds the current percentage of items and itemsBaseValues hold the initial percentage value and itemsCurrentValues holds the final value of each item and nextAvailableRelated(id) is a function which finds the next checked item in the chain of related items to an id and return it's id and previousItem(id) is a function which finds the item that is related to this item. It turns out to be a little complicated, I hope you can understand my example.

赞(0）回复(0）举报 2022-12-08

Ionic 如果某个元素被禁用，如何将该元素的值分配给另一个相关元素？

1条答案

html of first item:

typescript:

相关问题

热门标签

最新问答