visibility hidden in AngularJs?

Question

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

Answer 1

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.

Answer 2

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