chirag chirag - 4 months ago 25
CSS Question

visibility hidden in AngularJs?

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


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

Answer

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

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

Comments