visibility hidden in AngularJs?

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

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.

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>

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

Or if you are using bootstrap, use the invisible class

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

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>

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>