Using the angular.js ng-show directive to toggle the display of an element

When working with angular.js there may come a time to have a way to toggle the display of a given element. There are many ways of doing this, but if you wish to stick to some kind of angular.js built in way of pulling it off there is ng-show.

The ng-show directive will show or hide the element that it is used in depending on the expression provided to it with the ng-show attribute. This can be a useful way to toggle the display of something on and off, such as a UI component of some kind that is part of a custom directive.

ng-show basic use example

1
2
3
4
5
6
7
8
<div ng-app="app" ng-controller="toggle">
<div ng-show="showOn" class="ng-hide" >
<p>Okay it is visable</p>
</div>
<input type="button" value="toggle show" ng-click="showToggle()">
</div>
1
2
3
4
5
6
7
8
9
10
11
12
var app = angular.module('app', []);
app.controller('toggle', function ($scope) {
$scope.showOn = true;
$scope.showToggle = function () {
$scope.showOn = !$scope.showOn;
}
});