Angular Directives ngVisible and ngInvisible
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
.gitignore
.jshintrc
Gruntfile.js
README.md
bower.json
karma.conf.js
package.json

README.md

ngVisibleInvisible

Angular Directives ngVisible and ngInvisible

The ngVisible directive shows or hides the given HTML element based on the expression provided to the ngVisible attribute. The element is shown or hidden by removing or adding the .ng-invisible CSS class onto the element. The .ng-invisible CSS class is defined in the included CSS file and sets the visiblity style to hidden (using an !important flag). The visibility property hides an element while leaving the space where it would have been.

The ngInvisible directive shows or hides the given HTML element based on the expression provided to the ngInvisible attribute. The element is shown or hidden by removing or adding the .ng-invisible CSS class onto the element. The .ng-invisible CSS class is predefined in AngularJS and sets the visiblity to hidden (using an !important flag). The visibility property hides an element while leaving the space where it would have been.

Installation

bower install ng-visible-invisible

or

npm install ng-visible-invisible

Include in your main app file

angular.module('myApp', ['ng-visible-invisible']);

In your index.html file include js and css

  <link href="bower_components/ngVisibleInvisible/dist/ng-visible-invisible.min.css" rel="stylesheet">
  <script src="bower_components/ngVisibleInvisible/dist/ng-visible-invisible.min.js"></script>

##Use

<div ng-visible="checked"></div>
or
<div ng-invisible="checked"></div>