Niranjan Godbole Niranjan Godbole - 1 year ago 58
Javascript Question

How to hide content in angularjs?

Hi I am developing print functionality in angularjs. I followed I have one button and clicking on that i want to take print. For example i want to print below content.

<div id="printThis" >
This should BE printed!
<div class="modifyMe">old</div>

what problem is facing is i do not want to display div printThis in web page. Practically i am having page with i am binding values through scope variable. If i hide that div using bg-show or any other ways i am getting blank in print preview! So may i get some help to fix this? I am planning to implement the way here it is implemented Any help would be appreciated. Thank you.

Answer Source

You can use ng-click to toggle like this

<div id="printThis" ng-if="showPrint" ng-init="showPrint=false">
    This should BE printed!
    <div class="modifyMe">old</div>

<button type="button" ng-click="showPrint=!showPrint"></button>

If you don't want to use angular, try this


<div class="hiddenVal">
  This should NOT be printed!
<button id="btnPrint">Print (this button should also be NOT be printed)!</button>


@media screen {
  .hiddenVal {
      display: none !important;

Working Demo :

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download