Niranjan Godbole Niranjan Godbole - 1 year ago 37
Javascript Question

How to hide content in angularjs?

Hi I am developing print functionality in angularjs. I followed
http://jsfiddle.net/95ezN/121/. 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>
</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 https://www.rayafinancing.com/Calculator.aspx. 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>
</div>

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

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

HTML

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

CSS

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

Working Demo :http://jsfiddle.net/95ezN/1659/

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