如何隐藏angularjs中的内容？

问题描述：

嗨我正在开发angularjs打印功能。我跟着this。我有一个按钮，然后点击，我想要打印。例如，我想打印下面的内容。如何隐藏angularjs中的内容？

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

我面对的问题是我不想在网页中显示printThis。实际上，我有页面，我通过范围变量绑定值。如果我使用bg-show或任何其他方式隐藏该div，我在打印预览中变得空白！那么我可以帮助解决这个问题吗？我打算实施它的实施方式here。任何帮助，将不胜感激。谢谢。

答

您可以使用ng-click切换这样

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

如果你不想使用的角度，试试这个

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

工作演示：http://jsfiddle.net/95ezN/1659/

谢谢。以上代码适用于角度。但我正在使用JavaScript。 –

那么你为什么在你的问题中标记角？ – Vivz

答

您可以使用Bootstrap类.hidden打印从打印隐藏DIV或者您可以使用下面的CSS代码：

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

你必须使用。无打印类div的这你想隐藏。

尝试在OP小提琴中添加您的答案。 OP –

答

这是完整的解决方案（因为我也这么认为不允许从片段打开弹出式窗口代码段不会在这里工作）：

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>

谢谢。函数（divName）哪个divname我应该通过这里？另外我不想在网页上显示内容。 –

@NiranjanGodbole你想要打印的div。它会自动获取该div的内容并将其过滤到打印模式下打开的弹出窗口中。 –

如何隐藏angularjs中的内容？

相关推荐