Just a quick heads-up, I'm new to AngularJS
In my AngularJS application, I am using the $http service to fetch data. Each row has an update button that needs to trigger a server-side method (the API is already returning data) to sync with a third-party application. I need to display the Percent Complete and Status of the running sync (both stored in the database) after the update.
How can I initiate this update sync and refresh the displayed data including the % complete?
index.html
<tbody ng-controller="synchronizationController">
<tr ng-repeat="synchronization in synchronizations">
<td><a href ng-href="#/synchronizations/{{synchronization.syncID}}">{{ synchronization.syncName }}</a></td>
<td>{{synchronization.syncType}}</td>
<td>
<ng-switch on="synchronization.status">
<div ng-switch-when="0">Idle</div>
<div ng-switch-when="1">Running</div>
<div ng-switch-when="2">In Queue</div>
<div ng-switch-when="3">Failed</div>
<div ng-switch-when="4">Complete</div>
</ng-switch>
<div ng-show="synchronization.status == 1" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"
aria-valuenow={{synchronization.percentComplete}} aria-valuemin="0" aria-valuemax="100" style="width:auto">{{synchronization.percentComplete}}
</div>
<td>{{ synchronization.startTime | date:'medium' }}</td>
<td>{{ synchronization.endTime | date:'medium'}}</td>
<td ng-controller="synchronizationUpdate"><button class="btn btn-default" ng-click="updateData(synchronization.syncID, $index)">Update</button></td>
<td ng-controller="synchronizationUpdate"><button class="btn btn-default" ng-really-click="fullSync(synchronization.syncID)" ng-confirm-click="Full Sync will erase all data. Are you sure?">Full</button></td>
</tr>
</tbody>
controller
angular.module('SynchronizationsApp').controller("synchronizationUpdate", function (
$scope, synchronizationFactory) {
$scope.updateData = function (syncId,index) {
synchronizationFactory.initiateUpdateSynchronization(syncId, 'Update').success(function (response) {
console.log("Running Update Sync");
console.log(response);
$scope.synchronizations[index] = response.data;
}).error(function (error) {
console.log("Failed to run Update!" + error);
});
};
factory
angular.module('SynchronizationsApp').factory('synchronizationFactory', function($http, $q, $timeout){
var exposedAPI = {
getSynchronization: getSynchronization,
getSynchronizations: getSynchronizations,
initiateUpdateSynchronization: initiateUpdateSynchronization
};
return exposedAPI;
function get(url) {
return $http.get(url).success(function (data) {
}).error(function (msg, code) {
console.log(msg, code);
});
}
function getSynchronizations(){
return get('/api/synchronizations');
}
function getSynchronization(syncId){
return get('/api/synchronizations' + '/' + syncId);
}
function initiateUpdateSynchronization(syncId, syncType) {
return get('dosync' + '/' + syncId + '/' + syncType);
}
});