Within my HTML document, the following code is present:
<div ng-repeat="selection in selections"
style="margin-left:{{marginLeft}}%;width:{{progress}}%;background-color:{{selection}}">
</div>
In my controller, I have implemented functions to update these values dynamically:
function calculateExpenditure(expenditure, budget){
$scope.progress = (expenditure/budget) * 100;
if(count !== 0){
$scope.marginLeft += $scope.progress;
}
}
An unexpected issue arises each time the calculateExpenditure function is executed, where the properties of margin-left, width, and background-color get updated on previously set div elements.
I am seeking guidance on how to instruct Angular to update the scope variables associated with these properties exclusively in the last instance created by the ng-repeat. Is there a more suitable directive other than ng-repeat that should be utilized?
Your assistance on this matter would be greatly valued.