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.

The ng-show directive basic use example

For the HTML I have this worked out where I have a main div element that is where I will have my main mount point for this demo. I am then using the nv controler directive and using the value toggle for it. For a nested div I am then using the ng-show direction and have some nested content in that div that will display when it is viable.

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

In my javaScript code I am then defining what the toggle controller will be. With this controller I just have to so that there is a show on bool as part of the scope. When the show toggle function is called each time there is a click this bool value will be switched back and forth.

var app = angular.module('app', []);
app.controller('toggle', function ($scope) {
    $scope.showOn = true;
    $scope.showToggle = function () {
        $scope.showOn = !$scope.showOn;
    }
});

Conclusion

That is if for this post at least, I might get around to doing some more editing of my old angular js content at some point in the future, but maybe only while I am updating my vuejs content when doing so. I have found that I very much prefer to us vuejs over that of angular when it comes to using this kind of front end framework. Also I might have to get into editing this kind of content now and then when I update my posts on plain old vanilla javaScript as well. I can not say that I use angular that much, in fact thus far I am not really using it all in favor of vuejs, or just plain vanilla javaScript. So this is then one major reason why I have been neglecting my content on angularjs.

Speaking of vuejs there is reading my post on how to do this sort of thing in vuejs rather than that of angularjs by making use of the if directive in vuejs. Also speaking of vanilla javaScript it is not like doing this sort of thing is that hard when it comes to kicking any and all front end frameworks to the curb and just directly work within the web browser. One way would be to just get a reference to one or more div elements that I want to show or hide by one means or another, and then just make use of something like that of the style api to set the CSS value that will be used to show or hind the element. The CSS properties that could be changed are the visibility or the display property.