AngularJS DOM update for loop progress - dom

Question

I have a number of AJAX calls that need to be run for every entry in an array, I'm trying to supply some visual feedback on the progress of the loop through the array, the model is being updated correctly but i'm not seeing anything updated in the view trying to call $digest in the loop has no effect on the DOM.
I've tried adding $apply to the function in the inner loop but I'm still seeing no change.
$scope.UploadEntry = function(item){
var oDBGet = new htmldb_Get(null,
$v('pFlowId'),
"APPLICATION_PROCESS=UploadTargetDates",
$v('pFlowStepId'));
oDBGet.add('EX_TRD',$scope.Ext.TRDDate.val);
oDBGet.add('EX_MAX_TRD',$scope.Ext.MaxTRDDate.val);
oDBGet.add('EX_READ',Ext.ReadDownloadCheck);
oDBGet.get();
};
$scope.ShowUploadModal = true;
$scope.UploadDone = 0;
for(i in submissionList)
{
$scope.UploadEntry(submissionList[i]);
$scope.UploadDone += 1;
}
$scope.ShowUploadModal = false;
But the view:
<div class="UploadModal" ng-show="ShowUploadModal">
Uploading entries: {{UploadDone}} complete
</div>
Never seen as the entries are uploaded, but does show at the end of the loop if I take the $scope.ShowUploadModal = false; out from the end of the loop.

Answer 1

UPDATE
After discussion, author states that the http request is synchronous. The problem is still about "sychronity", but a little bit tricker. Take a look at Angular digest concepts. It basically runs all watchers, expressions (binds) and process all $evalAsync over and over until there is no change in the watches result and expressions anymore. Just after this the DOM is updated.
So, the problem is that all your sync request are being resolved prior to the end of the digest cycle, and the DOM render will only happens after the digest cycle finishes processing.
The simplest way to solve your problem, as you state you can't change API to call async, is to ensure your requests are asynchronous, grab their promises and only hide uploadModal when all of them had been completed (this can be achieved with promises API, read promises API and $timeout). Like this:
var loadingPromises = [];
$scope.ShowUploadModal = true;
$scope.UploadDone = 0;
for(i in submissionList) {
loadingPromises.push($timeout((function(index) {
return function() {
$scope.UploadEntry(submissionList[index]);
$scope.UploadDone += 1;
};
})(i), 0));
}
$q.all(loadingPromises).then(function() {
$scope.ShowUPloadMOdel = false;
});
Note the closure I created to make sure the correct index is passed to the request, and you need to inject $q service to your controller. Although this is going to solve your problem, you should create a service and move your loading logic there, returning a promise (change your $scope references to parameters):
app.service('yourLoaderService', function($timeout) {
this.load = function(url) {
return $timeout(function() {
var oDBGet = new htmldb_Get(null,
$v('pFlowId'),
"APPLICATION_PROCESS=UploadTargetDates",
$v('pFlowStepId'));
oDBGet.add('EX_TRD',$scope.Ext.TRDDate.val);
oDBGet.add('EX_MAX_TRD',$scope.Ext.MaxTRDDate.val);
oDBGet.add('EX_READ',Ext.ReadDownloadCheck);
oDBGet.get();
}, 0);
};
});
And your controller:
var loadingPromises = [];
$scope.ShowUploadModal = true;
$scope.UploadDone = 0;
for(i in submissionList) {
var promise = yourLoaderService.load(submissionList[i]).then(function() {
$scope.UploadDone++;
});
loadingPromises.push(promise);
}
$q.all(loadingPromises).then(function() {
$scope.ShowUPloadMOdel = false;
});
First answer
This is a conception error. You seem to come from a synchronous server side background, maybe Python, I don't know. If this is your real code, then the problem is that your code is completely synchronous. You are showing upload model, looping all the entries and hiding the model and this entire code happens in milliseconds (or less) all before the DOM gets rendered even once.
This happens because when you ask for the upload, Javascript doesn't hang on the uploading process, it just asks and keep going. You can find something about async programming here, here, here and here.
You have to hook up your uploaded count in the upload callbacks. I don't know what you are using to upload, but your $scope.uploadEntry shall return a promise, then you wait it to be done and update the count.
$scope.ShowUploadModal = true;
$scope.UploadDone = 0;
for(i in submissionList)
{
$scope.UploadEntry(submissionList[i]).then(function() {
$scope.UploadDone += 1;
scope.ShowUploadModal = $scope.UploadDone !== submissionList.length;
});
}
If you're using $http for the uypload job, just return it returns, as it is already a promise and change .then(funciton per .success(function. If not, this is going to be a little more complicated, and you need to read the Angular docs on promises.
Just a side note, you should take a look at Javascript naming convetions. Javascript normally assume cammelCase variables, not PascalCase. Here's David Crackford's convetion.