83
<button id="tagBtnId" name="TagsFilter" ng-show="disableTagButton">Tags</button>

ng-show applied display: none or display: block property But I want to apply visibility: hidden and visibility: visible property.

7 Answers 7

76

You can use ng-class or ng-style directives as below

ng-class

this will add class myclass to the button when only disableTagButton is true , if disableTagButton is false then myclass will remove from the button

expression pass to ng-class can be a string representing space delimited class names, an array, or a map of class names to boolean values.

1 - space delimited class names

.. ng-class="{strike: deleted, bold: important, red: error}".. 

2 - an array

.. ng-class="[style1, style2, style3]".. 

style1, style2 & style3 are css classes check the below demo for more info.

2 - expression

.. ng-class="'my-class' : someProperty ? true: false".. 

if someProperty exists then add .my-class else remove it.

If the css class name in the ng-class is dash separated then you need to define it as string like .. ng-class="'my-class' : .. else you can define it as string or not as .. ng-class="myClass : ..

ng-class DEMO

<button id="tagBtnId" name="TagsFilter" ng-class="{'myClass': disableTagButton}">Tags</button>

<style>
   .myClass {
       visibility: hidden
    }
</style>

ng-style

Expression pass the [ng-style][2] evals to an object whose keys are CSS style names and values are corresponding values for those CSS keys.

EX:

.. ng-style="{_key_ : _value_}" ... => _key_ is the css property while _value_ set the property value. Ex => .. ng-style="{color : 'red'}" ...

If your using something like background-color then its not a valid key of a object then it needs to be quoted as .. ng-style="{'background-color' : 'red'}" ... same as ng-class.

<button id="tagBtnId" name="TagsFilter" ng-style="disableTagButton">Tags</button>

then your disableTagButton should be like

$scope.disableTagButton = {'visibility': 'hidden'}; // then button will hidden.

$scope.disableTagButton = {'visibility': 'visible'}; // then button will visible.

so u can change the visibility of the button by changing the $scope.disableTagButton.

or you can use it as inline expression as,

ng-style="{'visibility': someVar ? 'visible' : 'hidden'}"

is someVar evaluates to true then visibility set to visible Else visibility set to hidden.

4
  • how I changed "visibility: visible". For that i have to create new class?
    – chirag
    Nov 14, 2014 at 10:21
  • Just set the variable to false, in this way the class is removed
    – Michael
    Nov 14, 2014 at 10:21
  • set disableTagButton to false then automatically class myClass will remove from the button then visibility: hidden will remove Nov 14, 2014 at 10:23
  • How to set display : block without true false condition? like ng-style="{"someDivId" , 'display':'block'}". I want to do this in the html not the js.
    – Milee
    May 31, 2017 at 14:48
51

You can use ng-style. Simple Example:

<div ng-style="{'visibility': isMenuOpen?'visible':'hidden'}">...</div>

At runtime, the style changes when isMenuOpen changes.

  • When isMenuOpen is true, you'll have style="visibility: visible".
  • When isMenuOpen is false, you'll have style="visibility: hidden".
3
  • How to set display : block without true false condition? like ng-style="{"someDivId" , 'display':'block'}". I want to do this in the html not the js.
    – Milee
    May 31, 2017 at 14:45
  • 1
    @Milee It's in the html. Example: <div ng-style="{'visibility': isMenuOpen?'visible':'hidden'}">...</div> Jun 4, 2017 at 13:49
  • you can write : ng-style="{visibility: isMenuOpen?'visible':'hidden'}" Quotes are only useful with compound words. Otherwise, you can use the CAML syntax for the css properties composed without quotes.
    – maliness
    Jul 25, 2017 at 15:57
15

Here's a simple directive that sets the visibility to hidden or visible (but not collapse):

.directive('visible', function() {

    return {
        restrict: 'A',

        link: function(scope, element, attributes) {
            scope.$watch(attributes.visible, function(value){
            element.css('visibility', value ? 'visible' : 'hidden');
        });
    }
  };
})

Usage:

<button visible='showButton'>Button that can be invisible</button>

angular.module('MyModule', [])

.directive('visible', function() {

  return {
    restrict: 'A',
    
    link: function(scope, element, attributes) {
    	scope.$watch(attributes.visible, function(value){
    	  element.css('visibility', value ? 'visible' : 'hidden');
        });
    }
  };
})

.controller('MyController', function($scope) {
  $scope.showButton = true;
});
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='MyModule' ng-controller='MyController'>
  <button visible='showButton'>Button that can be invisible</button>
  <button ng-click='showButton = !showButton'>Hide it or show it</button>
</div>

2
  • I like the directive approach, in this case it might be overkill. But I still like i t :)
    – Raz0rwire
    Sep 25, 2015 at 12:55
  • 3
    The Angular team should just add a ng-visible directive. Jan 10, 2017 at 16:25
13

Or if you are using bootstrap, use the invisible class

ng-class='{"invisible": !controller.isSending}'
1
  • simplest and most elegant solution, for people using bootstrap that is. Mar 24, 2016 at 15:29
2

You should use ngClass or ngStyle, in your case:

<button id="tagBtnId" name="TagsFilter" 
    ng-class="{'button-hidden':!disableTagButton}">Tags</button>

And this CSS:

.button-hidden{
   visibility: hidden;
}
1

why you not use ng-if your tag not render in your html page. I think you use this:

<button id="tagBtnId" name="TagsFilter" ng-if="disableTagButton">Tags</button>
2
  • 3
    This is similar to display;none, but the required style is visibility:hidden. Which is not the same. Jan 17, 2016 at 10:22
  • I wanted this ng-if functionality as I wanted to set visibility to hidden and the element should not appear in the html. perfect solution.
    – KiranC
    Mar 5, 2020 at 22:05
1

see https://docs.angularjs.org/api/ng/directive/ngShow the section about Overriding .ng-hide

All you need is to assign the class hg-hide-animate to the element

/* style your element(s) at least for selector.ng-hide */
/* in this case your selector is #tagBtnId */
#tagBtnId.ng-hide {
  /*visibility:hidden;*/
  opacity: 0;
  transition: opacity 1s ease-in;
}
#tagBtnId {
  /*visibility:initial;*/
  opacity: 1;
  transition: opacity 1s ease-out;
}

(function() {
  angular.module('app', []).controller('controller', Controller);
  /* @ngInject */
  function Controller($s) {var THIS = this;THIS.disableTagButton = false;}
  Controller.$inject = ['$scope'];
})();
/* style your element(s) at least for selector.ng-hide */
/* in this case your selector is #tagBtnId */
#tagBtnId.ng-hide {
  /*visibility:hidden;*/
  opacity: 0;
  transition: opacity 1s ease-in;
}
#tagBtnId {
  /*visibility:initial;*/
  opacity: 1;
  transition: opacity 1s ease-out;
}
<div ng-app='app' ng-controller="controller as viewmodel">
  <label>disabled</label>
  <input type="checkbox" ng-model="viewmodel.disableTagButton" />

  <!-- assign class "ng-hide-animate" -->
  <button 
    class="ng-hide-animate"
    id="tagBtnId" name="TagsFilter" ng-hide="viewmodel.disableTagButton">
    Tags
  </button>


  <pre inspect>viewmodel={{viewmodel | json}}</pre>
  
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.