CODEWITHSUNDEEP
javascriptangularjs
Kapil Soni
Kapil Soni

Reputation: 1051

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

enter image description hereenter image description hereI 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);
  })
}

Upvotes: 1

Views: 2679

Answers (1)

davidkonrad
davidkonrad

Reputation: 85528

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.

Upvotes: 2

Related Questions