How to remove the dynamically ng-hide class in AngularJS?

Question

I have to implement the image upload functionality and the problem

<div class="container responsiveImageSet">
  <div ng-show="imageLoader" style="text-align: center;">
    <img class="imageLoaderGif" src="images/googleLoader.gif">
  </div>
  <div class="container" >
      <span ng-repeat="imgURL in backgroundImageURL track by $index">
        <img class="uploadedImageSet" src="{{imgURL}}">
      </span>
  </div>
</div>

is that i have show the spinner before the image is uploaded and i am using ng-show for it but in the element section dynamically class="ng-hide" is added i have to remove this class becasue class is creating a problem for me please tell me how to fix this problem?

$scope.backgroundImageURL = [];
$scope.imageLoader = false;
$scope.uploadBackgroundImage = function(event) {
  $scope.imageLoader = true;

  //Get the value from the input field and assign into the fireabse node
  var userProductImg = $("#imgId")[0].files[0];
  var PSR = firebase.storage().ref('user/image');

  //get the date as well as put the imageURL from node
  var rn = new Date().getTime().toString();
  var task = PSR.child(rn).put(userProductImg).then(function(snapshot) {
    $timeout(function(){
      $scope.backgroundImageURL.push(snapshot.downloadURL);
      $scope.imageLoader = false;
      localStorage.setItem('userImageURL', $scope.backgroundImageURL);
    }, 0);
  })
}

Not sure how your html has that ng-hide class. Checked in a jsfiddle jsfiddle.net/U3pVM/35318 It doesnt contain any nghide class. can you please create a fiddle to explain it? — G_S
– G_S, Commented Feb 4, 2018 at 9:57

davidkonrad · Accepted Answer · 2018-02-04 10:06:24Z

2

I would certainly choose a ng-if over ng-show here.

ng-show:

The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag).

ng-if :

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

Remember to actually use an expression :

<div ng-if="imageLoader == true" style="text-align: center;">
  <img class="imageLoaderGif" src="images/googleLoader.gif">
</div>

You get rid of .ng-hide and have more accurate control, besides the element is inserted and removed when needed, not just shown or hidden by a ridiculous !important hack.

answered Feb 4, 2018 at 10:06

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kapil Soni Over a year ago

Sir, imagLoader == true its not properly work for me every time condition is commented in the element section?

davidkonrad Over a year ago

Hey @kapilsoni, I am not sure I understand, what do you mean by "every time condition is commented in the element section"? Btw you wrote imagLoader == true, guess it is a typo :)

Kapil Soni Over a year ago

Sir check updated fiddle i have uploaded image in which check imagLoader == true condition?

davidkonrad Over a year ago

@kapilsoni, where is the fiddle? As I can see from the screenshot uploadBackgroundImage() is called when the user select a file/image. In that you set imageLoader = true and imageLoader = false when the image is saved. That should work, looks OK. Does the spinner not show up? BTW, regarding "every time condition is commented in the element section" Yes, all those angular directives write comments in the code.

davidkonrad Over a year ago

@kapilsoni, see here, it really works by just setting a scope variable true or false -> plnkr.co/edit/5kLUWWVcWkTMAU35zSpN?p=preview

|

Collectives™ on Stack Overflow

How to remove the dynamically ng-hide class in AngularJS?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related