I have a table on an HTML page where the data is stored in a database. I want the table or the whole page to be loaded only after the data is received. Can I do this?
AngularJS Code:
angular.module("app", []).controller("controller", function($scope, $http) {
$http({
method: 'POST',
url: 'updateCoins.php',
data: {get: 1},
}).then(function(response){
$scope.db = response.data;
});
});
The table gets filled like this:
<tr>
<td>{{db[0]['percent']}}%</td>
</tr>
Generally you'd use a resolve with your router for this. You can also do something like this:
angular.module("app", []).controller("controller", function($scope, $http) {
$scope.dataLoaded = false
$http({
method: 'POST',
url: 'updateCoins.php',
data: {get: 1},
}).then(function(response){
$scope.db = response.data;
$scope.dataLoaded = true
});
});
Then in your html on the outermost element where you load your controller use ng-if="dataLoaded"
ng-if="dataLoaded" in the element where I user ng-controller (the whole page is blank), but works if I do it for the element directly below it.Easiest way if you're not using ngRoute or ui.router with resolves is to have a variable set before. Examples:
angular.module("app", []).controller("controller", function($scope, $http) {
$scope.hasCompleted = false;
$http({
method: 'POST',
url: 'updateCoins.php',
data: {get: 1},
}).then(function(response){
$scope.db = response.data;
$scope.hasCompleted = true;
});
});
<tr>
<td ng-show="hasCompleted">{{db[0]['percent']}}%</td>
</tr>
response?