i created directive for making print page.this directive have template page that included button and print template(this have ngRepeat on Result object).print button was clicked fire "click" funciton in Controller of directive then ajax request send to server for get array of object that fill print tamplate.
Mainpage.html
<div ng-class="{'btn':true,'btn-warning':true,'disabled':disableBtn}" data-toggle="modal"
ng-click="getdetail=true;" data-target="#detailModal">order detail</div>
<print-order disable-btn="disableBtn" order="selectedItem"></print-order>
print.template.html
<a ng-click="ctrl.click()" ng-class="{'btn':true,'btn-info':true,'disabled':ctrl.disableBtn}" >
print
<i class="fa fa-print"></i>
</a>
<div id="printSection">
<table style="width: 100%;font:13px tahoma;" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="border-bottom: 3px solid black;">
<p>number: </p>
{{ctrl.order.fldTracking}}
</th>
<th>
<img src="/images/receipt-logo.png" alt="">
</th>
<th style="border-bottom: 3px solid black;">
<p>code :</p>
<p> {{ctrl.order.customer.fldMobilePhone}}
<br> {{ctrl.order.fldAtFA.split("-")[0]}}
</p>
</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 3px solid black;">
<td colspan="3" style="padding: 10px;line-height: 20px;">
cutomer : {{ctrl.order.customerAddress.fldContactName }}
<br /> address: {{ctrl.order.customerAddress.fldAddress }}
<br/>mobile : {{ctrl.order.customerAddress.fldMobilePhone}}
<br/> phone : {{ctrl.order.customerAddress.fldTelephone}} </td>
</tr>
</tbody>
</table>
<h1>{{ctrl.title}}</h1>
<table dir="rtl" width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="margin-top:20px;border-top:2px solid #000000;;border-bottom:2px solid #000000;border-color: #000000">
<tbody>
<tr>
<td width="40%" style="padding-right:10px;font-size: 10px" align="right">name</td>
<td width="20%" style="font-size: 10px" align="center">number</td>
<td width="20%" style="font-size: 10px" align="center">price</td>
<td width="25%" style="font-size: 10px" align="right">price</td>
</tr>
<tr ng-repeat="item in ctrl.Components track by $index">
<td style="padding-right:10px;font-size: 9px">
{{item.offer.fldTitle}}<br>
</td>
<td style="font-size: 12px" align="center">{{item.fldQty}}</td>
<td style="font-size: 10px" align="center">{{item.fldUnitPrice}}</td>
<td style="font-size: 10px;padding: 5px">{{item.fldTotalPrice}}</td>
</tr>
</tbody>
</table>
</div>
printdirective.js
myApp.directive("printOrder",["$window","orderService","$timeout","$compile",function($windows,orderService,$timeout,$compile){
return{
restrict:"AE",
bindToController:{
disableBtn:"=",
order:"="
},
templateUrl:"/Widgets/printOrder.template.html",
transclude: true,
scope:true,
controllerAs:"ctrl",
controller:function(){
this.click=function(){
var popupWinindow =$windows.open("", '_blank', 'width=300,height=500');
orderService.getOrderDetail(this.order.id)
.then(function(result){
this.Components=result;
popupWinindow.document.open();
var el=angular.element("#printSection")
$compile(el)(this);
$timeout(function(){
// console.log(el.html());
popupWinindow.document.write(
`<html>
<head></head>
<body style="direction: rtl;">`+el.html()+` </body>
</html>`);
popupWinindow.document.close();
},500)
});
}
},
}
}])
when i clicked on print button .id of order send to directive then detail of order request of server with ajax that this should fill "#printSection" of template by $compile but this dont binding and Components property is empty.
but this dont binding and Components property is empty.
You cannot call $compile with this, in your case $compile(el)(this);
this != scope
Use:
controller:function($scope){
$compile(el)($scope);
}
Small Demo
Is it typo? var el=angular.element("#printSection")
Did you mean something like:
var warapper = document.querySelector('#printSection');
angular.element(warapper); //...
Related
My tables do not appear in Firefox. I saw that there is a compatibility problem with Firefox with AngularJS, what can I do?
Follow the code.
<table class="displayTagCss">
<thead>
<th style="width: 50px;"> </th>
<th style="width: 50px;">Ordem</th>
<th>Alertas</th>
<th>Proposição</th>
<th>Situação</th>
<th style="width: 50px;"> </th>
</thead>
<tbody>
<tr ng-repeat="proposicao in gruposSentencas['<c:out value='${grupo.idSentencaDePesquisa}' />']">
<td style="text-align: center;">
<img alt="Subir" title="Subir" ng-show="!$first" src="<html:rewrite page='/imagens/botao_subir.gif' />" ng-click="subirProposicao('<c:out value='${grupo.idSentencaDePesquisa}' />', $index)" />
<img alt="Descer" title="Descer" ng-show="!$last" src="<html:rewrite page='/imagens/botao_descer.gif' />" ng-click="descerProposicao('<c:out value='${grupo.idSentencaDePesquisa}' />', $index)" />
</td>
<td style="text-align: center;">{{$index+1 }}</td>
<td>
<div class="hover" ng-if="(proposicao.alertas.length > 0) || proposicao.haPendencia">
<img src="<html:rewrite page='/imagens/gfx/warning.png'/>" />
<div class="appear">
<ul>
<li class="alerta_proposicao" ng-repeat="alerta in proposicao.alertas">{{ alerta }}</li>
<li class="alerta_proposicao" ng-if="proposicao.haPendencia"><span>Observações de fase: </span>{{proposicao.textoObservacao}}</li>
</ul>
</div>
</div>
</td>
<td>{{ proposicao.identificadorDaProposicao }}</td>
<td>{{ proposicao.situacao }}</td>
<td style="text-align: center;"><img src="<html:rewrite page='/imagens/chk_off.png' />" ng-click="removerProposicao('<c:out value='${grupo.idSentencaDePesquisa}' />', $index)" alt="Excluir" title="Excluir" /></td>
</tr>
</tbody>
</table>
The 'thead' works, but the 'tbody' does not appear in Firefox.
I need to print (send to printer) all 100 element in my paged ng-repeat
while I display 20 element in the page
I tried to use AngularPrint but it didn't work because it print only one page
any idea please?
this is my code
<table class="table table-bordered">
<thead>
<tr class="info">
<th ng-click="sort('client')" class="col-md-1" rowspan="2" style="text-align: center; vertical-align: middle;">
Klant
<span class="glyphicon sort-icon" ng-show="sortKey=='client'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th class="col-md-2" colspan="2" style="text-align: center; vertical-align: middle;">
Total
</th>
<th ng-click="sort('difference')" class="col-md-1" rowspan="2" style="text-align: center; vertical-align: middle;">
Difference
<span class="glyphicon sort-icon" ng-show="sortKey=='difference'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('percentage')" class="col-md-1" rowspan="2" style="text-align: center; vertical-align: middle;">
Difference %
<span class="glyphicon sort-icon" ng-show="sortKey=='percentage'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
</tr>
<tr class="info">
<th ng-click="sort('firstYear')" class="col-md-1" style="text-align: center; vertical-align: middle;">
{{ criteria.firstYear }}
<span class="glyphicon sort-icon" ng-show="sortKey=='firstYear'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('secondYear')" class="col-md-1" style="text-align: center; vertical-align: middle;">
{{ criteria.secondYear }}
<span class="glyphicon sort-icon" ng-show="sortKey=='secondYear'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
</tr>
</thead>
<tbody class="searchable">
<tr ng-repeat="stat in stats | orderBy:sortKey:reverse" ng-class="stat.total1 >= stat.total2 ? 'danger-row':'success-row'">
<td>{{ stat.companyAbbrev }}</td>
<td class="td-right">€ {{ stat.total1 | number : 2}}</td>
<td class="td-right">€ {{ stat.total2 | number : 2 }}</td>
<td class="td-right">{{ stat.difference | number : 2 }}</td>
<td class="td-right">{{ stat.percentage| number : 2 }} %</td>
</tr>
</tbody>
</table>
I don't know for sure but this sounds like a grid of elements? What are you using for your grid? I know that AngularUI Grid has print and export to excel capabilities and a lot of supporting documentation. It can also be a little bit daunting to implement due to it's scope.
To answer your comment in regards to print functionality check this link: exporting data tutorial When you click the menu button in the example and select export to pdf it opens up the pdf in a separate browser tab that you can save or print.
Below is the html I have used to show data in the table, its working fine.
Now I want to convert it to jQuery Datatables.
HTML:-
<table cellpadding="3" class="table table-bordered">
<thead>
<tr class="success">
<th style="cursor: pointer;" ng-click="sort('DOB')"><b>DOB</b> <span class="glyphicon sort-icon" ng-show="sortKey=='DOB'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
<th style="cursor: pointer;" ng-click="sort('StateName')"><b>State</b> <span class="glyphicon sort-icon" ng-show="sortKey=='StateName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
<th style="cursor: pointer;" ng-click="sort('FileId')"><b>Image</b> <span class="glyphicon sort-icon" ng-show="sortKey=='FileId'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
<th><b>Actions</b></th>
</tr>
</thead>
<tbody>
<tr dir-paginate="employee in employees|orderBy:sortKey:reverse|filter:search|itemsPerPage:5" ng-model="search">
<td>{{employee.DOB | date:'MM/dd/yyyy' }}
<td>{{employee.StateName}}
</td>
<td>
<img ng-src="UploadedFiles/{{employee.FilePath}}" class="img-circle" style="max-width: 50px" alt='Employee Image Missing' />
</td>
</tr>
</tbody>
</table>
how to select date from calendar pop up? There's a text field which is in disabled mode. When you click on the calendar icon at the corner of the text field the calendar pops up which displays the current date. I need to select the date which is two years back. How do i go about doing that in selenium java?
below is the html code:
<div class="datepicker datepicker-dropdown dropdown-menu" style="display: block; top: 429.1px; left: 234.5px;">
<div class="datepicker-days" style="display: block;">
<table class=" table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;">
<i class="icon-arrow-left"></i>
</th>
<th class="switch" colspan="5">February 2009</th>
<th class="next" style="visibility: visible;">
<i class="icon-arrow-right"></i>
</th>
</tr>
<tr>
<th class="dow">Su</th>
<th class="dow">Mo</th>
<th class="dow">Tu</th>
<th class="dow">We</th>
<th class="dow">Th</th>
<th class="dow">Fr</th>
<th class="dow">Sa</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
</tbody>
<tfoot>
</table>
</div>
<div class="datepicker-months" style="display: none;">
<table class="table-condensed">
<thead>
<tbody>
<tr>
<td colspan="7">
<span class="month">Jan</span>
<span class="month">Feb</span>
<span class="month">Mar</span>
<span class="month">Apr</span>
<span class="month">May</span>
<span class="month">Jun</span>
<span class="month">Jul</span>
<span class="month">Aug</span>
<span class="month">Sep</span>
<span class="month">Oct</span>
<span class="month">Nov</span>
<span class="month">Dec</span>
</td>
</tr>
</tbody>
<tfoot>
</table>
</div>
<div class="datepicker-years" style="display: none;">
</div>
use try catch statement
In try u can search for the element to be present in the page (any unique element related to the date to be selected)
In catch block you can click on the back button .
so in this case it will keep clicking on back/previous button in the calender to go to the previuos year .
When I generate an EXT.Button, there resulting HTML looks like this:
<table id="ext-comp-1015" cellspacing="0" class="x-btn x-btn-text-icon right-toolbar-top-link x-btn-icon">
<tbody class="x-btn-small x-btn-icon-small-left">
<tr>
<td class="x-btn-tl"><i> </i></td>
<td class="x-btn-tc"></td>
<td class="x-btn-tr"><i> </i></td>
</tr>
<tr>
<td class="x-btn-ml"><i> </i></td>
<td class="x-btn-mc">
<em class="" unselectable="on">
<button type="button" id="ext-gen93" class=" x-btn-text"> </button>
</em>
</td>
<td class="x-btn-mr"><i> </i></td>
</tr>
<tr>
<td class="x-btn-bl"><i> </i></td>
<td class="x-btn-bc"></td>
<td class="x-btn-br"><i> </i></td>
</tr>
</tbody>
</table>
How can I create and pass a template into the button to have it output simply a "button" tag? I am using EXT.js 3.2.1
Thanks,
Jamie
You can get around it by using an Ext.Panel..
new Ext.Panel({
renderTo: 'id-of-element',
html: '<button onclick="alert(\'I was clicked\');">Click Me</button>',
border: false
});