Hiding elements in the printing preview of my app using data-ng-hide

Inquiry: The use of ng-hide with both text.name.length and !text.name.length results in the content being visible on the print preview. Why does this occur?

Personal Perspective

<div>
    <div class="content" id="printable">
    My name is  <b data-ng-hide="text.name.length">__________</b><b data-ng-hide="!text.name.length">{{text.name}}</b> 
    </div>
    <button data-ng-click="printDiv('printable')">Print</button>  
</div>

This function controls the display of the print preview when printing

Printing Controller

app.controller('PrintController', function ($scope) {
    $scope.printDiv = function (divName) {
        var printContents = document.getElementById(divName).innerHTML;
        var originalContents = document.body.innerHTML;
        var popupWin = window.open('', '_blank', 'width=800,height=600');
        popupWin.document.open()
        popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</html>');
        
        popupWin.document.close();
    }
})

Answer №1

By using a popup window, you have ventured outside the realm of angularjs.

Take note of how you are creating the popup window with its own HTML element and stylesheet in your code.

popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</html>');

No trace of angular can be found in popupWin.

Moreover, there is more to your angular application than just DOM elements. When transferring the DOM to the popup window, did you also transfer $scope? No, you did not.

Trying to enhance your angular app by moving the DOM is like going to work without your head - it simply doesn't function properly.

There is definitely a better approach. Search for "angularjs print preview" on Google. You will discover resources like this one.

Answer №2

If you're looking to hide the name when it's empty and show the report on click, whether with or without the name, check out this example. I'm not sure what issue you're facing:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1c0cfc6d4cdc0d38fcbd2e1908f938fd9">[email protected]</a>" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="PrintController">
   <div>
   <input ng-model="text.name" />
    <div class="content" id="printable">
    My name is <b data-ng-hide="!text.name.length">{{text.name}}</b> 
    </div>{{text.name.length}}
    <button data-ng-click="printDiv('printable')">Print</button>  
</div>
  </body>

</html>


var app = angular.module('plunker', []);

app.controller('PrintController', function ($scope) {

  $scope.text = {name: 'John'};
  //$scope.text = {name: ''};

  $scope.printDiv = function (divName) {
      var printContents = document.getElementById(divName).innerHTML;
      var originalContents = document.body.innerHTML;
      var popupWin = window.open('', '_blank', 'width=800,height=600');
      popupWin.document.open()
      popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</html>');
      popupWin.document.close();
  }
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a toggle effect similar to jQuery using JavaScript

Looking for pure JavaScript code to implement show/hide functionality similar to jQuery. Currently, I am using the following code: y=document.getElementById('regform').style.display; if (y == 'block'){ document.getElementById(&apo ...

Modify information by dragging a point

UPDATE: I have made some changes to my post and code. Following Justinas's advice, I have modified my code to display the information of the 3 points below the div. However, there is an issue - whenever I move a point, new information is displayed ...

Steps to successfully set up a React application without encountering any installation errors

Hey everyone, I've been trying to install React on my system for the past two days but keep encountering errors. Initially, I used the commands below to install the React app and it worked smoothly: 1. npm install -g create-react-app 2. create-react- ...

Using jQuery AJAX may cause the removal of Javascript functionality when running on Phone

I'm currently developing an application using jQuery and Phonegap. Within my javascript code, I utilize $.ajax to send requests to my web server in order to retrieve various sections of the app. These sections are essentially html snippets that are d ...

Pattern to identify digits from 0 to 9 along with specific symbols

I am currently in the process of creating a regular expression that can match 0 to 9 (up to 10 digits) and /-. (0 to 2 max), without having to be all . or all //. It can be /.\- or .-. or any combination of the three, with a maximum of two of those ch ...

Activate the current page link in materializecss pagination

I stumbled upon a fantastic pagination plugin for Materializescss UI, available on Github, and it's working like a charm. Now, I am looking to customize this plugin by adding the ability to set the current page and have it highlighted as active. Take ...

Exploring jQuery.each: A guide to navigating JSON objects

As a beginner in working with JSON, I am struggling to iterate over a JSON response received via AJAX. My objective is to extract and loop through checkbox values retrieved from a database table such as 2,3,7,9,3. However, I am currently facing difficultie ...

What is the method for invoking an Angular controller function with a parameter value that has been freshly displayed on the current view?

After simplifying my code for better understanding, I am facing an issue with a mean.js application. The backend is organized with express and mongodb, and all resource endpoints are functioning properly independently. However, the problem arises when deal ...

Removing a Request with specified parameters in MongoDB using NodeJS

Working with Angular 4 and MongoDB, I encountered an issue while attempting to send a delete request. My goal was to delete multiple items based on their IDs using the following setup: deleteData(id) { return this.http.delete(this.api, id) } In order ...

The @emit event in vue.js is not being received by the parent component

Within my application, there is a form located in the ManageCards component. This form includes a child component called ImageUpload, which emits an image file and its local URL to the parent component: <form class="mb-3"> <div class ...

How can I alter the position of the scrollbar in a nested div structure in CSS?

Within my nested div structure, I have an inner div that functions as an auto scroller. However, this inner div is contained within another outer div, which itself is positioned inside yet another outer div. The scroller is only visible within the first ...

Having trouble with Gulp hanging on the task named 'some_task_name' when using gulp.parallel or gulp.series?

Out of the blue, my gulp configuration suddenly stopped working. It gets stuck on 'Starting...' when I use tasks with gulp.parallel or gulp.series. Just yesterday, the same config was running smoothly. Why did this sudden change occur? Here is a ...

Unable to modify the styles of nested Material UI components

I am currently customizing the styles of the card and cardContent components in material ui. I have implemented them within functional components and am facing an issue with overriding the root style of each component. Specifically, I am struggling to modi ...

Triggering the AJAX function in the main window

My HTML webpage has a hyperlink that, when clicked, opens the same page in another window with a hash value appended to the URL using window.open. For example, the URL could look like this: http://mywebsite.com#hash=value The webpage contains a JavaScript ...

Check if the value is a string and contains a floating point number; if so, parse and format the float

I need to work on formatting decimal values returned by an API that only responds with strings. The requirement is to add a leading zero but no trailing zeros to any decimal value in the string. If the value is not a float, it should remain unchanged. For ...

Upon refreshing the datatable, I encountered a issue where the checkbox cannot be selected

After updating my data table with new content through an AJAX request, I am facing an issue where I am unable to select the check-boxes in the table. I use a class selector to choose the rows that contain multiple check-boxes. The select event is placed in ...

Is it possible to submit a POST method without using a form?

I am looking to create a button that functions similar to the "Follow" buttons found on social networks. The challenge I face is that I need to refresh the page when the user clicks the button, as the content of the page heavily depends on whether the user ...

Button for expanding Google Maps API v3

My Ionic app using Google Maps v3 API recently added a new button that expands the map, but I can't figure out how to remove it. Has anyone encountered this issue before? If you need a visual reference, here is a screenshot showing the button at the ...

A tutorial on utilizing a bundle in webpack based on certain conditions

My project consists of an app.bundle.js (the main app bundle) and two cordova bundles: iosCordova.bundle.js and androidCordova.bundle.js. Depending on whether the user is logging in on an iOS or Android device, I only script src one of them. All the bundle ...

Discovering a string within an array of objects using Angular JS

As a beginner in Angular JS with a limited background in JavaScript, I apologize if my explanation is not clear. I want to display an image based on a value in an array that contains objects. The following code works for me: <img ng-show="user.Groups[ ...