Skip to content

Instantly share code, notes, and snippets.

@ovarunendra

ovarunendra/app.js

Last active February 28, 2019 02:25
Show Gist options
  • Save ovarunendra/0a1cc7ea224b2458d8d1 to your computer and use it in GitHub Desktop.
Save ovarunendra/0a1cc7ea224b2458d8d1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.js
var app = angular.module('printModal', ['ui.bootstrap']);
app.directive('printModal', ['$window', function($window) {
return function(scope, element, attrs) {
var printMe = function() {
document.getElementById('main-content').style.visibility = 'hidden';
$window.print();
document.getElementById('main-content').style.visibility = 'visible';
}
element.bind('click', printMe);
element.on('$destroy', function() {
element.unbind('click', printMe);
});
}
}]);
app.controller('MainCtrl', ['$modal', '$window', function($modal, $window) {
var ctrl = this;
ctrl.openInvoice = function() {
var modalInstance = $modal.open({
templateUrl: 'print.html',
size: 'lg',
controller: 'PrintCtrl',
controllerAs: 'ctrl'
});
}
ctrl.items = [{
name: 'Baseballs',
quantity: 50,
unitCost: 5,
total: 250
}, {
name: 'Baseball Bats',
quantity: 2,
unitCost: 150,
total: 300
}];
ctrl.print = function() {
$window.print();
}
}]);
app.controller('PrintCtrl', ['$window', function($window) {
var ctrl = this;
ctrl.items = [{
name: 'Baseballs',
quantity: 50,
unitCost: 5,
total: 250
}, {
name: 'Baseball Bats',
quantity: 2,
unitCost: 150,
total: 300
}];
}]);
Raw
index.html
<!DOCTYPE html>
<html ng-app="printModal">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
</head>
<body id="main-content" ng-controller="MainCtrl as ctrl" class="container text-center">
<h4>Print Modal Content Demo</h4>
<button class="btn btn-success" ng-click="ctrl.openInvoice()"> Open Modal</button>
<button class="btn btn-warning" ng-click="ctrl.print()"> <i class="fa fa-print"></i> Normal Print</button>
<div>
<table class="table table-condense">
<caption>Sports Products Invoice</caption>
<thead>
<tr class="bg-primary">
<th>Name</th>
<th>Quantity</th>
<th>Item Cost</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in ctrl.items">
<td>{{item.name}}</td>
<td>{{item.quantity}}</td>
<td>{{item.unitCost | number:2}}</td>
<td>{{item.total | number:2}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Raw
print.html
<div class="print-content">
<div class="modal-header">
<h1>Invoice</h1>
</div>
<div class="modal-body">
<table class="table table-condense">
<caption>Sports Products Invoice</caption>
<thead>
<tr class="bg-primary">
<th>Name</th>
<th>Quantity</th>
<th>Item Cost</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in ctrl.items">
<td>{{item.name}}</td>
<td>{{item.quantity}}</td>
<td>{{item.unitCost | number:2}}</td>
<td>{{item.total | number:2}}</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<div class="pull-left">
<h5>&#9400; 2015</h5>
</div>
<div class="pull-right hidden-print">
<button class="btn btn-primary" print-modal=""><i class="fa fa-print"></i>Print</button>
<button class="btn btn-primary" ng-click="$close()">OK</button>
</div>
</div>
</div>
Raw
style.css
@media print {
/*#main-content * {
visibility: hidden;
}*/
.print-content * {
visibility: visible;
}
.modal {
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
min-height: 550px
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment