How to hide content in angularjs?

Question

Hi I am developing print functionality in angularjs. I followed this. 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>

The problem I'm facing is I do not want to display 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 it is implemented here. Any help would be appreciated. Thank you.

Dalvinder Singh · Accepted Answer · 2017-07-27 07:18:48Z

2

You can either use Bootstrap class .hidden-print to hide div from print or you can use following css code:

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

You have to use .no-print class to div which you want to hide.

answered Jul 27, 2017 at 7:18

Dalvinder Singh

2612 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ramesh Rajendran Over a year ago

Try to add your answer in OP fiddle. It may helps easy for the OP

Vivz · Accepted Answer · 2017-07-27 07:33:00Z

1

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/

edited Jul 27, 2017 at 7:33

answered Jul 27, 2017 at 7:20

Vivz

6,6282 gold badges19 silver badges34 bronze badges

2 Comments

Niranjan Godbole Over a year ago

Thanks. Above code works with angular. But i am using javascript.

Vivz Over a year ago

Then why did you tag angular in your question?

Gaurav Srivastava · Accepted Answer · 2017-07-27 07:31:08Z

1

this is complete solution(snippet will not work here because i think SO doesn't allow to open popup windows from snippet):

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  
   $scope.printDiv = function(divName) {
            var printContents = document.getElementById(divName).innerHTML;
            var popupWin = window.open('', 'Print', 'height=600,width=1200');
            popupWin.document.open();
            popupWin.document.write('<html><head><title>ATLAS SEARCH</title></head><body class="print-screen" onload="window.print()"><table width="100%"><tr><td>&nbsp;</td></tr></table>' + printContents + '</body></html>');
            popupWin.document.close();
        } 
});

@media print
{    
    .print-btn
    {
        display: none ;
    }
}

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>

<div ng-app="myApp" ng-controller="myCtrl">
  
  <div id="printThis" >
    This should BE printed!
    <div class="modifyMe">old</div>
</div>
<a class="print-btn btn btn-success" ng-click="printDiv()">Print</a>
</div>

edited Jul 27, 2017 at 7:31

answered Jul 27, 2017 at 7:24

Gaurav Srivastava

3,2323 gold badges20 silver badges37 bronze badges

2 Comments

Niranjan Godbole Over a year ago

Thanks. function(divName) which divname i should pass here? Also i do not want to show contents on webpage.

Gaurav Srivastava Over a year ago

@NiranjanGodbole the div you want to print. it will automatically get the content of that div and past it into the popup which is opened in print mode.

Collectives™ on Stack Overflow

How to hide content in angularjs?

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related