CODEWITHSUNDEEP
javascriptangularjshtml
Sampath
Sampath

Reputation: 65870

Angular method executes indefinitely when it uses with the ng-style

HTML

<div class="progress-bar" ng-style="{width: Event.Methods.GetProgress() + '%'}"></div>

JS

 GetProgress: function () {
                    var total = Number($scope.Event.Item.Total);
                    var goal = Number($scope.Event.Item.Goal);
                    if (total > goal) {
                        total = goal;
                    }
                    return Math.round((total / goal) * 100);
                },

I have used above code to show a progress bar on the page.Progress bar is working fine.But when I put a debug point on the GetProgress() method where it executes indefinitely.When I remove the ng-style then there is no problem (But you know then my progress bar is also not working).So could you tell me how to avoid above kind of behaviour ? Thanks in advance.

Upvotes: 0

Views: 75

Answers (1)

shershen
shershen

Reputation: 9993

HTML

<div class="progress-bar" ng-style="{width: progressValue + '%'}"></div>

JS

//initially setup the value
$scope.progressValue = 0;

//then on every call of GetProgress is updated 
 GetProgress: function () {
                    var total = Number($scope.Event.Item.Total);
                    var goal = Number($scope.Event.Item.Goal);
                    if (total > goal) {
                        total = goal;
                    }
                    $scope.progressValue = Math.round((total / goal) * 100);
                },

Upvotes: 1

Related Questions