如何隱藏angularjs中的內容？

嗨我正在開發angularjs打印功能。我跟着this。我有一個按鈕，然後點擊，我想要打印。例如，我想打印下面的內容。如何隱藏angularjs中的內容？

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

我面對的問題是我不想在網頁中顯示printThis。實際上，我有頁面，我通過範圍變量綁定值。如果我使用bg-show或任何其他方式隱藏該div，我在打印預覽中變得空白！那麼我可以幫助解決這個問題嗎？我打算實施它的實施方式here。任何幫助，將不勝感激。謝謝。

來源

2017-07-27 Niranjan Godbole

您可以使用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/

來源

2017-07-27 07:20:51 Vivz

謝謝。以上代碼適用於角度。但我正在使用JavaScript。 –

那麼你爲什麼在你的問題中標記角？ – Vivz

您可以使用Bootstrap類.hidden打印從打印隱藏DIV或者您可以使用下面的CSS代碼：

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

你必須使用。無打印類div的這你想隱藏。

來源

2017-07-27 07:18:48

嘗試在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>

來源

2017-07-27 07:24:51

謝謝。函數（divName）哪個divname我應該通過這裏？另外我不想在網頁上顯示內容。 –

@NiranjanGodbole你想要打印的div。它會自動獲取該div的內容並將其過濾到打印模式下打開的彈出窗口中。 –

如何隱藏angularjs中的內容？

回答

相關問題