I have encountered an issue while working on a project. There is a page with an input field called balance within a div named balanceDiv. This field should not be visible to the admin, so I used ng-show to hide/show the div based on the user's login ID. I wrote two functions in the Angular controller - one for retrieving the login ID and another for showing or hiding the div based on that ID. The condition is that if the login ID is 1 (admin), the div will be hidden; otherwise, it will be shown.
init();
function init()
{
setLoginId();
showHide();
initialize();
}
Initially, the setLoginId function is supposed to execute first followed by showHide function. However, what I observed was that the execution jumps to the showHide function when making an AJAX call.
function setLoginId()
{
var apiRoute = baseUrl + '/api/AmountDists/GetLoginId/';
var result = CrudService.getAll(apiRoute);
result.then(function (response) {
debugger
$scope.loginId = response.data;
},
function (error) {
console.log("Error: " + error);
});
}
function showHide() {
if ($scope.loginId == 1) {
$scope.balanceDiv = false;
}
else {
$scope.balanceDiv = true;
}
}
After calling the AJAX in setLoginId, the execution moves to showHide before the response is received, causing $scope.loginId to be undefined. Why is this happening? Why does the execution switch to another method during the AJAX call?