Published: Modified: V1
angular

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