AngularJS 静态进度条的问题答案

【问题标题】：Issues With AngularJS Static Progess BarsAngularJS 静态进度条的问题
【发布时间】：2015-02-16 21:34:24
【问题描述】：

我是 angularjs 新手，我在尝试做的进度条上有几个问题。

我的场景是，点击一个按钮会显示一个进度条部分（我正在工作），这个进度条有 4 个单独的框。当显示该部分时，第一个开始加载（这个位也可以工作）。

我的问题是：

我似乎无法让它自动启动下一个框
我还希望栏在等于 100 后变为成功

以下是我认为的代码，请注意只有第一个 progressbar 设置了值

<div class="row">
    <div class="col-sm-3" style="margin-top: -6px;">
        Copying Statement Data<br />
        <progressbar id="Statement" value="data.progress" style="margin: 0px 0% !important"></progressbar>
    </div>
    <div class="col-sm-3" style="margin-top: -6px;">
        Running Matching Rules<br />
        <progressbar id="Rules" style="margin: 0px 0% !important"></progressbar>
    </div>
    <div class="col-sm-3" style="margin-top: -6px;">
        Matching Items<br />
        <progressbar id="Matching" style="margin: 0px 0% !important"></progressbar>
    </div>
    <div class="col-sm-3" style="margin-top: -6px;">
        Creating Transactions<br />
        <progressbar id="Transactions" style="margin: 0px 0% !important"></progressbar>
    </div>
</div>

以下是为我制作动画的控制器代码：

$scope.commandButtonsDisabled = false;    
$scope.data = { progress: 0 };

    (function progress() {
        if ($scope.data.progress < 100) {
            $timeout(function () {
                $scope.data.progress += 1;
                progress();
            }, 200);
        }
        if ($scope.data.progress == 100) {
            $scope.commandButtonsDisabled = false;
            $scope.showprogbarsection = true;
        }
    })();

进度条截图

【问题讨论】：

有几件事可以为您指明正确的方向...您的Statement 进度条是唯一具有value= 的进度条，因此它是唯一实际显示任何内容的进度条。其次，您有一个if (progress < 100)，但没有一个if (progress = 100)。
@Claies 我厌倦了添加 if 语句，但无法让它发挥作用，我已经提到我的描述中只有一个“价值”。我不确定如何让它做多个这是我寻求帮助的原因
我不太确定这意味着什么；进度条只需要监控一个代表进度条所在位置的值，按百分比计算。现在，您的进度条只是每 200 毫秒递归调用一次并在值上加一，它没有响应页面上的任何其他内容或任何其他进度条。
什么时候应该开始填满其他进度条？什么应该触发它们？
@Claies 最终它将调用其他人正在编码的服务，该服务将在每个框中包含这 4 个部分，当它击中它们时会继续。要知道我只是想让按钮触发它们，然后我可以将它们绑定到我的服务中

标签： javascript angularjs

【解决方案1】：

这是我的解决方案：

 $scope.data = { progress: 0, progress2: 0, progress3: 0, progress4: 0 };

    (function progress() {
        if ($scope.data.progress < 100) {
            $timeout(function () {
                $scope.data.progress += 1;
                progress();
            }, 100);
        }
        if ($scope.data.progress == 100) {
            (function progress2() {
                if ($scope.data.progress2 < 100) {
                    $timeout(function () {
                        $scope.data.progress2 += 1;
                        progress2();
                    }, 100);
                }
                if ($scope.data.progress2 == 100) {
                    (function progress3() {
                        if ($scope.data.progress3 < 100) {
                            $timeout(function () {
                                $scope.data.progress3 += 1;
                                progress3();
                            }, 200);
                        }
                        if ($scope.data.progress3 == 100) {
                            (function progress4() {
                                if ($scope.data.progress4 < 100) {
                                    $timeout(function () {
                                        $scope.data.progress4 += 1;
                                        progress4();
                                    }, 200);
                                }
                                if ($scope.data.progress4 == 100) {
                                    $scope.disablebutton = false;
                                    $scope.hideprogbarsection = true;
                                }
                            })();
                        }
                    })();
                }
            })();
        }
    })();

【讨论】：