Updating DOM element value from controller in AngularJs following an AJAX request

Currently, I am facing an issue in my code where I want to display a progress bar and hide it until isLoaded becomes true.

<uib-progressbar class="progress-striped active" value="100" type="warning" ng-hide="{{isLoaded}}"></uib-progressbar>

Inside the NameLists controller script, I have the following:

$scope.isLoaded = false;
$http({
      method: 'POST',
      url: 'services/getLists.php'
    }).success(function(data, status, headers, config){
        $scope.isLoaded=true;
        console.log(data);
    }).error(function(data, status, headers, config) 
    {

    });

Even after the data has been loaded and isLoaded has been set to true, the progress bar is still not hiding as expected.

Answer №1

Experiment with:

 ng-hide="isLoaded"

Remove the curly braces.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Populate the AngularJS scope with a dynamically generated array

My Angular Application is functioning properly with <script> var app = angular.module('MyApp', []); app.controller('myCtrl', function ($scope, $sce) { $scope.urls = [ { "url": $sce.t ...

What is the most effective method for tracking file upload progress using SSE?

I am currently working on creating a file upload progress feature that is compatible with older browsers using AJAX. In HTML5, there is the xhr.upload.progress event which works well for modern browsers, but I need an alternative for non-XHR2 browsers. I h ...

Leveraging the AngularJS promise/defer feature alongside the Quickblox framework, learn how to efficiently upload images and subsequently upload public URLs to a custom

I am currently developing an application that requires users to upload 5 images of themselves. Using a backend-as-a-service platform like Quickblox, I have to create and upload blob files individually. Once each image is uploaded, I receive a success call ...

The JavaScript code will automatically execute loops

Let me illustrate my point with two functions. Function 1 This function triggers a transition when you hover over the square. If you move your mouse off the element and then back on while the transition is still in progress, it will wait until the end of ...

Custom directives are designed to receive arrays as string inputs

I've encountered an issue with my custom directive that has an isolated scope. When I pass an Array variable to the directive, it is being treated as a String inside the directive. This is how my directive looks: angular.module('my.directives& ...

The Hover Hover textbox stays in place once clicked on

I have implemented a search bar that displays a textbox when a user hovers over a button. I am looking to modify the code so that the textbox remains visible even after the user has clicked on it. This way, if the user accidentally moves their mouse away f ...

Monitoring individual elements of an array within an Angular service

Is there a way to monitor changes in an array element within a service? Let's consider the following scenario with CartController and ProductListService. Within the ProductListService, data is fetched as follows: /** * Fetch all the products in us ...

Error detecting 403 status code during jquery AJAX request

My current code is set up to trigger an application on a different user's machine through port 9084, as I do not have access to a DEV server. The application in question is written in JAVA and I am trying to initiate it from my ASP.Net application (wh ...

The most effective method for incorporating a header and footer into an HTML page utilizing a variety of client-side frameworks

Looking for a solution for my HTML project where I want to incorporate a header and footer to minimize rework. Any suggestions on a good approach? I have experimented with AngularJS using ng-include, and here is the code snippet: var app = angular.module ...

Is it possible to invoke a helper function by passing a string as its name in JavaScript?

I'm encountering a certain issue. Here is what I am attempting: Is it possible to accomplish this: var action = 'toUpperCase()'; 'abcd'.action; //output ===> ABCD The user can input either uppercase or lowercase function ...

Utilizing jQuery to Trigger a JavaScript Function in a Separate File

Here is my question: I currently have 2 files: //File1.js function TaskA() { //do something here } //File2.js function TaskB() { //do something here } $(function() { TaskA(); }); The issue I am facing is that the TaskB function in File2.js ...

Typescript Angular filters stop functioning properly post minification

I developed an angular filter using TypeScript that was functioning properly until I decided to minify the source code. Below is the original filter: module App.Test { export interface IGroupingFilter extends ng.IFilterService { (name:"group ...

Guidelines on transforming a Java Object list into JSON format and displaying it through AJAX requests

Currently, I am facing an issue where I have a Java object list retrieved from the database as an ArrayList of objects. I need to display this on a JSP page using AJAX. While I know how to display an ArrayList of Strings via AJAX in a JSP page, I'm st ...

"Troubleshooting: Why isn't my Bootstrap alert displaying properly after implementing Ajax

I'm currently working on validating a form using ajax. I have utilized bootstrap's alert alert-danger and alert alert-success classes to enhance the UI, but upon return, it is only displaying as plain HTML without the desired appearance. Can some ...

Swap out the image for a div element if the image is not found

Is there a way to accurately display an image if it's available, and use a div as a replacement if the image is not present? // How can I determine `imageExists` without encountering cross-origin issues? (imageExists) ? (<img class="avatar-img" sr ...

deactivate a vessel, causing all of its contents to be rendered inactive

Hi there, I am in search of a container that has the ability to disable all elements within it, not just inputs but also images and other elements without the disabled property. I do not want to hide the container, but rather disable it. Do you know if suc ...

When trying to access the Nodejs http://test.dev:3000/api/profile API, I encountered an issue where there was no 'Access-Control-Allow-Origin' header for the Origin 'http://localhost:9000'

NodeJS - Angularjs Encountering a CORS Issue in NodeJS. While REST GET requests are functioning properly, I'm facing an issue with REST POST requests in nodeJS and unable to resolve it. Upon making the request, I am receiving the common error messa ...

Conceal the div element if the value exceeds 0

I'm looking for a way to display a div when the number of remaining days is less than 0. I got it working on jsfiddle, but for some reason, it doesn't work anywhere else. if ($('.daysrem&a ...

fancy box appears when double-clicking on a div element

Help needed: How can I open a div in fancybox on double clicking another div using jQuery with Rails 3.1? Here is the function I have inside document.ready() $("#a1").dblclick(function () { $.get("/projects/edit/"+this.id,{ u:$('#user').val ...

The Challenge of Upgrading from AngularJS 1 to Angular 2: An Adapter Solution

<html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="app.css" type="text/css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script> <script src="https:/ ...