如何在 Angularjs 循环中增加进度条

Question

我正在学习 angularjs，我在循环期间增加进度条时遇到了一些问题。

我会解释得更好。我有带有所有月份复选框的模态，就像下面网站上显示的那样

http://vitalets.github.io/checklist-model/

所以，我可以选择一个或多个月来获取数据。

html代码是

 <fieldset>
    <input type="checkbox" ng-model="calendar" ng-change="keepMonths()">All
    <div ng-repeat="month in months">
        <div class="row">
            <input type="checkbox" checklist-model="choose.selected" checklist-value="month"> {{month.name}}
        </div>
    </div>
    <button name="Export" ng-click="exportExcel()" class="upButton">Export</button>
    <div class="demo-section k-content" style="width: 350px;">
        <h4>{{status}}</h4>
        <div kendo-progress-bar="progressBar" k-min="0" k-max="100" ng-model="progress"></div>
    </div>
</fieldset>

如果我点击导出按钮确实可以正常工作，但我想放一个进度条，因为月份的处理需要很多时间，我希望用户关注数据的处理，所以我尝试要做到这一点：

   $scope.exportExcel = function () {

    $scope.status = "Processing...";  // it doesn't work
    $scope.$apply($scope.status);  // it doesn't work

    var data = []
    var Increase = $scope.choose.selected.length / 100

    for (var i = 0; i < $scope.choose.selected.length; i++) {
        startDate = new Date("01/01/2015 00:00:00"; //for example
        endDate = new Date("31/01/2015 23:59:59"; //for example

            MUSTService.GetExcel($rootScope.empreendimento, $rootScope.pontoconexao, postohorario, dataInicio, // GetExcel goes to code behind and returns a json (dados) with all data of that month
            function (dados) {
                data = $scope.concatDados(dados, data);  // concatDados is responsible for concatenate all data from months in one variable (data)
            }, null, dataFim);  

        $scope.progress = $scope.progress + Increase; // it doesn't work
        $scope.$apply($scope.progress); // it doesn't work
        $scope.progress = 20; // it doesn't work (for test)
        $scope.$apply($scope.progress); //  it doesn't work (for test)
    }

    // the code below is only responsible for downloading the excel
    var query = 'SELECT NomReduzido AS [Empreendimento], NomCurto AS [Ponto de conexão], DinQuinzeminutos AS [Data/Hora], IFNULL(CodOrigem, \'\') AS Origem, ';
    query = query + ' INTO XLSX("MUST_' + $rootScope.empreendimento.trim() + '_' + decodeURI($rootScope.pontoconexao).trim() + '_' + $rootScope.postohorario.trim() + faltante + '.xlsx" , ? ) FROM ?';
    alasql(query, [opts, data]);

    $scope.progress = 20; // it works
    $scope.$apply($scope.progress); // it works
    $scope.status = "concluded..."; // it works
    $scope.$apply($scope.status);   // it works
}

如果我尝试增加进度条，它不起作用。进度条在for循环结束后才开始增加，我也不知道为什么。我在代码里放了一些注释，帮助大家理解。

我试图将类似的东西放在循环中，只是为了测试，但它不起作用。但是，如果我将相同的代码放在循环之外，它就可以工作，但真正需要时间的是循环部分，因此在此处增加是很重要的。

   $scope.progress = 20;
   $scope.$apply($scope.progress);

我什至尝试放一张带有消息的图像 "Loading"，但图像仍然只在 for 循环结束时出现。

如果有人能帮我展示一种在循环中增加进度条甚至显示图像的方法，我将不胜感激

Answer 1

$scope.progress 在代码中的正确时间正确设置。但是，只要您的脚本同步执行，您就永远不会看到在进度条本身上显示更新的重绘。在桌面应用程序中，这个问题通常通过 UI 线程和工作线程来处理。 UI 线程基本上是空闲的，所以当它被告知进度已经增加时，它会很高兴地重新绘制。现在撇开 Web Workers，JavaScript 是单线程的，所以当你在 for 循环中时，它永远不会空闲并允许重绘。

如果这个进度条是必不可少的，那么绝非易事的答案是使用 $timeout 使您的 for 循环异步。即使将超时延迟设置为 0 也应该有效。

可以在 this Stack Overflow question and the accepted answer on this one 的第二个答案中找到更多信息以及如何进行的想法。

如何在 Angularjs 循环中增加进度条

How to Increase a progress bar in Angularjs loop

angularjs

progress-bar