Why does Angular's ng-hide not update properly?

My goal is to manipulate a variable named hideProgressBar using the "ng-hide" directive within this view by utilizing the $scope in my controller. However, I am encountering difficulties.

The following line functions correctly:

$scope.hideProgessBar = true;

But the subsequent line fails to execute properly:

$scope.hideProgessBar = false;

You can review the entire code snippet below:

.controller('UltimasEdicoesCtrl', function($scope, $cordovaFileTransfer, $cordovaFileOpener2) {
 $scope.hideProgessBar = true;

    $scope.Download = function () {
        $scope.hideProgessBar = false;
        ionic.Platform.ready(function($scope){

         var url = "http://www.wgontijo.com.br/teste.pdf";
         var filename = url.split("/").pop();
         var targetPath = cordova.file.externalRootDirectory + 'Pictures/' + filename;

          $cordovaFileTransfer.download(url, targetPath, {}, true).then(function (result) {                   
                $cordovaFileOpener2.open(
                     targetPath,
                    'application/pdf'
                  ).then(function() {
                      // file opened successfully
                  }, function(err) {
                      alert('erro ao abrir o arquivo')
                  });  

          }, function (error) {
               alert('Erro ao abrir o arquivo');
          }, function (progress) {
                $scope.downloadProgress = (progress.loaded / progress.total) * 100;
          });
  });
  }

})

HTML

<div class="w3-progress-container" ng-hide="{{hideProgessBar}}">
        <div id="myBar" class="w3-progressbar w3-green" style="width:{{downloadProgress}}%">
          <div id="demo" class="w3-center w3-text-white">{{downloadProgress}}%</div>
        </div>
 </div>

Answer №1

To fix the issue, simply eliminate the curly braces {{}} from ng-hide="{{hideProgessBar}}" and your code will function correctly. The problem arises because the ng-hide directive is designed to recognize Angular attributes without the need for additional curly braces, so including them confuses Angular.

Answer №2

Check out this code snippet:

<div class="progress-container" ng-show="showProgressBar">
    <div id="myProgress" class="progress-bar bg-success" style="width:{{uploadProgress}}%">
      <div id="status" class="text-white text-center">{{uploadProgress}}% Complete</div>
    </div>
</div>

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

Exploring the Universe: Modify the hue of a celestial body and showcase information upon hoveringokableCall

I have been working on developing a simulation that shows the positions of 4673 of the nearest galaxies. In this simulation, each galaxy is represented as a point. My goal is to change the color of a point when the mouse hovers over it and display the na ...

Can someone explain what {...props} means within the context of React Navigation's Stack.Screen?

Can you explain the importance of using {...props} on this specific page? <Stack.Screen name="Home"> {props => <HomeScreen {...props} extraData={someData} />} </Stack.Screen> Interestingly, my application functions correctly even w ...

The functionality of the onclick button input is not functioning properly in the Google

Here is some JavaScript code: function doClick() { alert("clicked"); } Now, take a look at this HTML code: <div > <table border="2" cellspacing="0" cellpadding="0" class="TextFG" style="font-family:Arial; font-size:10pt;"> <tr> <t ...

CORS error: The 'Access-Control-Allow-Origin' header is missing

I have a website that is being accessed through multiple domain names. Let's say the main hosted website is example.com and the forwarded domain names are example-x.com, example-y.com, example-z.com When visitors access the forwarded domains, there ...

How can AngularJS handle multiple routes using unique templates while sharing the same controller?

I am currently researching whether I can achieve the functionality described in the title. Here are my initial thoughts: Let's consider the following routes I have set up: .when('/', { templateUrl : 'partials/homepage.html&ap ...

Can Google Charts columns be customized with different colors?

Is it possible to modify the colors of both columns in Google's material column chart? Here is the code I am using for options: var options = { chart: { title: 'Event Posting', subtitle: 'Kairos event p ...

What is the best method for creating a draggable widget in HTML, specifically with the use of Angular?

I am searching for an HTML div that is free floating and can be dragged and positioned anywhere on the page without being affected by other elements. It's okay if the element blocks the view of elements below, and it would be great if there is a minim ...

Determining Whether a Specific Value Exists in the JQuery Selector '.name'

Is there a way to check if a specific value exists within the elements with the class of $('.name')? I'm already looping through an array to look for each entry in $('.name'), so I can't iterate over $('.name') as we ...

Is it possible to simultaneously verify if an array is empty within an Object along with checking the other fields?

Let's say I have an object that has the following structure: filter: { masterName: '', service:[], } What is the best way to determine if both the array and masterName field are empty? ...

Leveraging the power of jQuery and vanilla JavaScript to create a pop-up print window for a Div element within a CMS platform that does not support media query stylesheets

I have been grappling with this particular issue for weeks now, seeking guidance from previous inquiries here. Yet, despite the helpful hints, I am still struggling to find a viable solution. My website features a scrolling sidebar measuring approximately ...

Unable to retrieve response in Laravel ajax post, encountering issues either with errors or database insertion

My current issue involves making a POST ajax call to pass a form input value through a route to a controller that will execute an insert function. I have set up everything including the route, insert function, controller, and blade with the ajax call. Howe ...

Console not displaying array output

Context: Currently, I'm in the process of developing an application that utilizes AJAX to fetch PHP arrays encoded into JSON format for dynamically constructing tables. However, I've encountered an issue where despite having no compilation errors ...

Expanding the functionality of a regular expression

My goal is to identify JavaScript files located within the /static/js directory that have a query string parameter at the end, denoted by ?v=xxxx, where 'x' can be any character or number. Here's an example of a match: http://127.0.0.1:8888 ...

Steps for executing a function once an AJAX call is completed inside an iframe

I am facing a challenge with extracting a variable value called useableData from an iframe back to the parent page. The page and iframe are both on the same domain. Inside the iframe, there is an AJAX call that populates some input fields with data, and I ...

jQuery - can you identify which specific object from the entire set this is?

I am curious if there is a simple method to identify which DOM object I have when it is also part of another set of objects. To illustrate, let's consider the following scenario: There are 5 div elements: <div id="1"></div> <div id="2 ...

When sending a GET request to an express server for data, the response received is in the form of a

I've been working on using the Instagram API to fetch some data. However, I've encountered an issue where, when sending the data from the express server back to the client, instead of logging the data to the console, the client only displays a si ...

Swap two frames effortlessly with just a single click!

Is there a way to effortlessly change the contents of two frames with just one click? With a single click, I'd like to modify both "framename" and "framename2" by setting their href attribute to 'qwerty' and 'qwerty2' respectively ...

Dynamically assigning ng-bind value from the controller rather than relying on an expression

<div ng-app =“App” ng-controller = “ctrl”> <input ng-model = “firstName”> <p ng-bind = “showFirstName”></p> <script> var app=(‘App’,[]); app.controller(‘ctrl’,function($scope) { //This Line $scope.show ...

Adding an exception for ClickAwayListener in React-MUI

Hey there! I'm currently exploring MUI and trying to incorporate the ClickAwayListener API into my project, but I'm facing some difficulties. You can take a look at my project on codesandbox here: https://codesandbox.io/s/react-leaflet-icon-ma ...

Tips on running methods consecutively within ngOnInit in Angular

I'm currently working on an ngoninit function that contains four methods. Two of these methods are responsible for retrieving data from the API, while the other two are intended to load this data when the page loads. ngOnInit(){ getname(); getsubjects ...