How do I make the HTML page load after AngularJS receives a response from the database?
I have a table in an HTML page where data is stored in a database. I want the table or the whole page to load only after the data is received. Can I do it?
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 is filled in like this:
<tr>
<td>{{db[0]['percent']}}%</td>
</tr>
+3
source to share
2 answers
Typically, you should use a solution 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"
+2
source to share
The easiest way, unless you are using ngRoute or ui.router with permissions, is to have a variable in front of it. 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>
+2
source to share