Question

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);
                },

我已使用上面的代码在页面上显示进度条。进度条工作正常。但是当我在GetProgress()方法上放置一个无限期执行的调试点。当我删除{{1那么没有问题（但你知道我的进度条也没有用）。那么你能告诉我如何避免上述行为吗？提前谢谢。

Answer 1

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);
                },

Angular方法在使用ng-style时无限期地执行

1 个答案: