javascript - how to make sum value changed depend on select box?

Question

i have a multiple HTML select element

<select ng-model="selectedCar" class="form-control form-control-sm" id="select2" multiple="multiple">

and I generate rows like this

<td ng-model = "test123"  
    ng-if="selectedCar.includes(arrayItem.month)" 
    ng-init=" benefits(arrayItem) " 
    ng-repeat="arrayItem in data.information"  class="tg-0lax"> 
     {{::arrayItem.benefits}} 
</td>

please note I call a function through : ng-init=" benefits(arrayItem)

this is my function:

$scope.benefits = function(item){ 
   if (item){ 
     benefits = benefits+  parseFloat(item.benefits); 
     $scope.benefitsCal=  parseFloat(benefits); 
   } else { 
     $scope.benefitsCal = 0; 
   }
}

the problem, when I unselect a month from the multi-select, the total is not updated and I noticed that the value is incremental? this is my row that set the result from the function

<td class="tg-0lax"> {{benefitsCal}}</td>

please save my day

question from:https://stackoverflow.com/questions/65881917/how-to-make-sum-value-changed-depend-on-select-box

Answer 1

As you want to change value based on the selection from the select box then you should add ng-change attribute and implement the function for change event.

Example:

<select ng-model="selectedCar" class="form-control form-control-sm" id="select2" multiple="multiple" ng-change="myChangeFunc()">