print div is not working in angularjs

Question

I have two text box. If I enter any value in textbox afterthat if I click print the entered value is not coming on the print page. Only empty text box is coming. Please help me how can I resolve this issue.

plunkr

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>AngularJS Print Directive of html templates </title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://code.angularjs.org/1.4.1/angular.js"></script>
  <script>
    var app = angular.module('myApp', []);

    app.controller('myCtrl', function($scope) {
      $scope.printToCart = function(printSectionId) {
        var innerContents = document.getElementById(printSectionId).innerHTML;
        var popupWinindow = window.open('', '_blank', 'width=600,height=700,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
        popupWinindow.document.open();
        popupWinindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + innerContents + '</html>');
        popupWinindow.document.close();
      }
    });
  </script>
</head>

<body id="printSectionId" ng-app="myApp">
  <div ng-controller="myCtrl">
    <h1>AngularJS Print html templates</h1>
    <form novalidate>
      First Name:
      <input type="text" ng-model="firstName" class="tb8">
      <br>
      <br> Last Name:
      <input type="text" ng-model="lastName" class="tb8">
      <br>
      <br>
      <button ng-click="Submit()" class="button">Submit</button>
      <button ng-click="printToCart('printSectionId')" class="button">Print</button>
    </form>
  </div>
  <div>
    <br/>
    <br/><a href="http://www.code-sample.com/2015/07/angularjs-2-forms-validation.html" target="_blank">More About AngularJS Print...</a></div>
</body>

</html>

verify that your are allwoing popups in your browser, on the other hand here in won't reproduce because of sandboxed frame show 'allwo-popups' permission is not set. — Renzo Calla
– Renzo Calla, Commented May 22, 2018 at 13:16
It has setted. I enabled allowd popup permission. Now also its not working. — sathish kumar
– sathish kumar, Commented May 22, 2018 at 13:27

Nakul Gawande · Accepted Answer · 2018-05-22 13:28:05Z

3

This is a simple solution to this, just add a value field to the tag. Hope it works.

First Name:
  <input type="text" ng-model="firstName" class="tb8" value={{firstName}}>
  <br>
  <br> Last Name:
  <input type="text" ng-model="lastName" class="tb8" value={{lastName}}>
  <br>

answered May 22, 2018 at 13:28

Nakul Gawande

5364 silver badges5 bronze badges

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

Collectives™ on Stack Overflow

print div is not working in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related