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

我甚至尝试将图像显示为“正在加载”，但图像仅在for循环结束时仍然显示。

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

Answer 1

正确地在代码中正确设置了

$scope.progress。但是，只要您的脚本同步执行，您将永远不会看到显示进度条本身更新的重绘。在桌面应用程序中，通常通过具有UI线程和工作线程来处理此问题。 UI线程基本上是空闲的，因此当它被告知进度增加时，它会愉快地重新绘制。暂且不说Web Workers，JavaScript是单线程的，所以当你在for循环内部时，它永远不会空闲并允许重新绘制。

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

有关更多信息以及如何继续操作的建议，请参阅this Stack Overflow question的第二个答案以及this one上接受的答案。

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

1 个答案: