Javascript AngularJS静态进度条的问题

我是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;
        }
    })();

进度条截图 这是我的解决方案：

 $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;
                                }
                            })();
                        }
                    })();
                }
            })();
        }
    })();

---

有几件事可以为你指明正确的方向。。。您的语句进度条是唯一一个具有值=，因此它是唯一一个实际显示任何内容的进度条。第二，您有一个if progress<100，但没有一个if progress=100。@Claies我很想添加and if语句，但无法使其工作，并且我提到我在描述中只有一个“值”。我不确定如何让它做多次，这是我所要求的帮助，我真的不确定这是为了实现什么；进度条只需要监控一个表示进度条所在位置的值（百分比）。现在，你的进度条只是每200毫秒递归调用一次，然后将一个添加到值中，它对页面上的任何其他内容或任何其他进度条都没有响应。其他进度条应该什么时候开始填充？什么应该触发它们？@Claies最终它将调用一个其他人正在编码的服务，该服务将在一个对话框中包含这4个部分，当它命中它们时，每个框都将进行处理。要知道，我只希望按钮触发它们，然后我可以将它们绑定到我的服务，一旦它建立