Is visibility hidden in AngularJs?

Question

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

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

Answer 1

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

ng-class

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

the ng-class expression can be a string representing class names delimited by spaces, an array, or a class name map for boolean values.

1 - space-separated class names

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

2 - array

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

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

2 - expression

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

if someProperty exists then add .my-class and delete it.

If the css class name in ng-class separated by a dash, you need to define it as a string, for example .. ng-class="'my-class' : .. else, which you can define as a string or not like .. ng-class="myClass : ..

ng-class DEMO

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

---

ng-style

The expression passes [ ng-style ][2] evals to an object whose keys are CSS style names and values ​​that correspond to the values ​​for these CSS keys.

Example:

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

If you use something like background-color , then this is not a valid object key, then you need to specify it as .. ng-style="{'background-color' : 'red'}" ... just like ng-class.

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

then your disableTagButton should look like

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

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

or you can use it as an inline expression like

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

is someVar evaluates to true, and visibility is set to visible Else visibility, set to hidden .

Answer 2

You can use ng-style . A simple example:

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

At run time, the style changes when isMenuOpen changes.

• If isMenuOpen true , you will get style="visibility: visible" .
• If isMenuOpen false , you will have style="visibility: hidden" .

Answer 3

Here is a simple directive that sets the visibility to hidden or visible (but does 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'); }); } }; }) 

Using:

 <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> 

Answer 4

Or if you are using bootstrap, use the invisible class

 ng-class='{"invisible": !controller.isSending}' 

Answer 5

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; } 

Answer 6

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

All you need to do is assign the hg-hide-animate 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> 

Answer 7

why don't you use the ng-if tag that doesn't appear on your html page. I think you are using this:

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