printing an app page in ionic - angularjs

i'm trying to print a page in ionic. the print button works in chrome but it doesn't work in android/device.
is it possible to print the currently displayed page in ionic? how should i go about it?
here's my code for the page to be printed:
<ion-view title="Review New Member Info" id="page6" style="background-color:#162c51;">
<ion-content padding="true" class="has-header">
<div>
<img src="img/kYYXJ9o0Qk6yNSgx8ZLb_imgpsh_fullsize.jpg" style="display: block; width: 100%; height: auto; margin-left: auto; margin-right: auto;">
</div>
<!-- <div class="spacer" style="height: 40px;"></div>
<div class="spacer" style="height: 40px;"></div>-->
<h4 style="color: #fff">Step 3.) Review Member's Information and Submit</h4>
<div align="center">
<!--<img id="smallImage" height="1024" width="768" src="{{imageCapture}}"/>-->
<img src="{{imageCapture}}" id="smallImage" style="height: 30%; width: 30%; object-fit: contain">
</div>
<form="myForm">
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="mmid" class="form-control">
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="cardNumber" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="fname" class="form-control" >
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="gender" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="mname" class="form-control">
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="birthplace" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="lname" class="form-control">
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="citizenship" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="bday" class="form-control" >
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="sssTinID" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="email" style="background-color:#d3d3d3" readonly ng-model="email" class="form-control">
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="companyName" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="mobile" class="form-control">
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="companyAddress" class="form-control" >
</div>
</div>
<div class="row">
<div class="col-xs-6">
<!--<input type="text" style="background-color:#d3d3d3" readonly ng-model="address" class="form-control">-->
<textarea name="textarea" readonly ng-model="address" class="form-control" ></textarea>
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="workTitle" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="city" class="form-control" >
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="srcFunds" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="zipcode" class="form-control" >
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="otherSrcFunds" class="form-control" >
</div>
</div>
</form>
<div class="spacer" style="height: 3px;"></div>
<button ng-click="goSubmit(userdata.fname,userdata.mname,userdata.lname,userdata.bday,userdata.email,userdata.mobile,userdata.addr,userdata.zipcode)" id="review-button1" class="button button-assertive button-block">Submit</button>
<div class="spacer" style="height: 3px;"></div>
<!--<div>
<img src="img/y1pHZHQQjSNii05shKd1_travelcard.jpg" style="display: block; width: 100%; height: auto; margin-left: auto; margin-right: auto;">
</div>-->
<h5 id="login-heading3" style="color:#F8F3F3;text-align:center;">All rights reserved 2017 - Omnipay for PAL</h5>
</form>
and here's the print button on that same page:
Print

Related

Unable to get the value using getAttribute method,and Javascript in selenium

the element marked i want to get the value to compare it with excel data
#FindBy(id="TAXEI")
//#FindBy(xpath="//*[#id='TAXEI']")
public WebElement taxesEIvalue;
public void verifyTaxesEIvalue() {
//jse.executeScript("arguments[0].setAttribute('type', '')",taxesEIvalue);
String value=taxesEIvalue.getAttribute("value");
System.out.println("the value is "+value);
}
I am facing problem to get the value in an application to compare it from excel,but unable to get value through Dom structure.The Html structure did't provide Value attribute
Here is the html code for the element unable to get the value that is in text box,i have compare with that value with the excel data using data driven
<div class="col-lg-6 col-md-6 col-sm-6">
<fieldset class="fsStyle">
<legend class="legendStyle">
<label class="control-label main">TAXES</label>
</legend>
<div class="wages">
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">EI</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXEI" disabled="disabled">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">QPIP</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXQPIP" disabled="disabled">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">CPP</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXCPP" disabled="disabled">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">QPP</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXQPP" disabled="disabled">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">Income Tax</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXIT" disabled="disabled">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">Quebec Tax</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXQTax" disabled="disabled">
</div>
</div>
</div>
<a id="divExemptNamesIncome"></a>
<p class="form-control-static"><strong id="divExemptNamesIncome"></strong></p>
</div>
</fieldset>
</div>

Can not access ng-model values inside controller [angularJS]

When I try to access user.firstname value in controller, it gives the following error.
TypeError: Cannot read property 'firstname' of undefined
$scope.signUpCustomer = function(){
console.log("GGGGGGGGGGGGGGGGGGGGGGGGG ", $scope.user.firstname);
}
<form class="form-horizontal font-hp-simplified signUpUserForm row" role="form" ng-submit="signUpCustomer()" name ="signUpUserForm" ng-show="!userVendor">
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<label for="firstname" class="col-md-12">First Name:</label>
<div class="col-md-12">
<input ng-model="user.firstname" type="text" class="form-control" name="firstname" required />
<span class="text-danger" ng-show="signUpUserForm.firstname.$invalid && signUpUserForm.firstname.$dirty ">First name is required</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lastname" class="col-md-12">Last Name:</label>
<div class="col-md-12">
<input ng-model="user.lastname" type="text" class="form-control" name="lastname" required />
<span class="text-danger" ng-show="signUpUserForm.lastname.$invalid && signUpUserForm.lastname.$dirty ">Last name is required</span>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<label for="email" class="col-md-12">Email:</label>
<div class="col-md-12">
<input ng-model="user.email" type="email" class="form-control" name="email" required />
<span class="text-danger" ng-show="signUpUserForm.email.$error.required && signUpUserForm.email.$dirty ">Email is required</span>
<span class="text-danger" ng-show="signUpUserForm.email.$error.email && signUpUserForm.email.$dirty ">Please enter valid email</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="password" class="col-md-12">Password:</label>
<div class="col-md-12">
<input ng-model="user.password" type="password" class="form-control" name="password" required />
<span class="text-danger" ng-show="signUpUserForm.password.$invalid && signUpUserForm.password.$dirty">Password is required</span>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<label for="phone" class="col-md-12">Phone:</label>
<div class="col-md-12">
<input ng-model="user.phone" type="text" class="form-control" name="phone" required />
<span class="text-danger" ng-show="signUpUserForm.phone.$invalid && signUpUserForm.phone.$dirty">Phone is required</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="country" class="col-md-12">Country:</label>
<div class="col-md-12">
<select name="country" ng-model="user.country" type="text" class="form-control form-bg-white" required>
<!-- <option value="" disabled selected>Select Your Country</option> -->
<option value="" disabled selected></option>
<option ng-repeat="country in countries" value="{{country}}">{{country}}</option>
</select>
<span class="text-danger" ng-show="signUpUserForm.country.$invalid && signUpUserForm.country.$dirty">Country is required</span>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-12">
<!-- Button -->
<div class="form-group">
<div class="col-md-12">
<div class="icon-user-signup">
<div class="input-group-addon">
<i class="fa fa-user"></i>
</div>
<button id="btn-signup" class="btn btn-primary col-md-12">SIGN UP</button>
</div>
</div>
<!-- <div class="mrg-top-10 col-md-12 text-right">
<h4><a ng-click="go('/seller#/signup')" class="ven-link">
Become a vendor today
</a></h4>
</div>-->
</div>
</div>
</div>
<!-- <div class="col-md-12 control">
<div class="signup-border" >
Already have an account ?
<a ui-sref="loginUser" >
Sign In Here
</a>
</div>
</div> -->
</form>
You need to initialize the $scope.customer first in controller
$scope.user = {};

tabindex is not working with required attribute

<div class="row">
<div class="col-md-6">
<div class="form-body">
<div class="form-group">
<label>First Name</label>
<div class="input-group">
<input type="text" tabIndex="1" name="first_name" class="form-control">
</div>
</div>
<div class="form-group">
<label>Email Address</label>
<div class="input-group">
<input type="email" tabIndex="3" name="username" class="form-control" ng-model="username" required user-exist /><br/> <span style="color: red" ng-show="partnerForm.username.$touched && partnerForm.username.$invalid">
<span ng-show="partnerForm.username.$error.required">Email is required.</span>
<span ng-show="partnerForm.username.$error.email">Enter Correct Format.</span>
<span ng-show="partnerForm.username.$error.userExist">User already exists.</span>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-body">
<div class="form-group">
<label>Last Name</label>
<div class="input-group">
<input type="text" tabIndex="2" name="last_name" class="form-control">
</div>
</div>
</div>
</div>
</div>
the tabindex 3 is not working.i have checked by removing the required attr then it is working .the attributes required and tabindex is conflicting with each other.please help me to solve this.or provide a directive (working) for tabindex.

print preview not showing correct format

i have a form that is formatted into 2 columns. i impelemented printing on my app using this plugin: https://github.com/katzer/cordova-plugin-printer and the print preview is showing. however it does not follow the 2-column format of my form. how do i print 2 columns?
here is my form's html code:
<form id="myFormMain">
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="mmid" class="form-control">
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="cardNumber" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="fname" class="form-control" >
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="gender" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="mname" class="form-control">
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="birthplace" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="lname" class="form-control">
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="citizenship" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="bday" class="form-control" >
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="sssTinID" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="email" style="background-color:#d3d3d3" readonly ng-model="email" class="form-control">
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="companyName" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="mobile" class="form-control">
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="companyAddress" class="form-control" >
</div>
</div>
<div class="row">
<div class="col-xs-6">
<!--<input type="text" style="background-color:#d3d3d3" readonly ng-model="address" class="form-control">-->
<textarea readonly ng-model="address" class="form-control" ></textarea>
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="workTitle" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="city" class="form-control" >
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="srcFunds" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="zipcode" class="form-control" >
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="otherSrcFunds" class="form-control" >
</div>
</div>
</form>
and this is my print function in controller.js:
$scope.goPrint = function(divName)
{
var divEl = document.getElementById('myFormMain');
var allInputs = divEl.querySelectorAll("input,textarea");
for( var counter = 0; counter < allInputs.length; counter++)
{
var input = allInputs.item(counter);
input.setAttribute("value", input.value);
}
var page = document.getElementById('myFormMain').innerHTML;
cordova.plugins.printer.print('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body><div><img src="img/kYYXJ9o0Qk6yNSgx8ZLb_imgpsh_fullsize.jpg" style="display: block; width: 100%; height: auto; margin-left: auto; margin-right: auto;"></div><div align="center">' + page + '</body></html>', 'review2.html');
}
I am not sure but where is grid library (e.g. ionic, or bootstrap)
cordova.plugins.printer.print(
'<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.css" /> // or ionic.css or something is missing
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body> ... </body>
</html>', 'review2.html');`

Concatenate form values in controller

I have a typical contact form where I concat the values into a preview div with AngularJS. This works fine if all the fields are filled out. I would like to move this into a controller so that I can conditionally add some static text such as only put a slash between phone and fax if both those fields are filled. I cannot find any sample code that goes beyond concatenating a couple values.
<div class="col-md-offset-1">
<div class="form-group">
<label class="control-label col-sm-2" for="companyFirm">Company/Firm</label>
<div class="col-sm-10">
<input type="text" ng-model="companyFirm" class="form-control" placeholder="Enter your company or firm name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="contact">Contact</label>
<div class="col-sm-10">
<input type="text" ng-model="contact" class="form-control" placeholder="Enter the full name of the listing contact">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="address">Address</label>
<div class="col-sm-10">
<input type="text" ng-model="address" class="form-control" placeholder="Enter your street address">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="city">City</label>
<div class="col-sm-10">
<input type="text" ng-model="city" class="form-control" placeholder="Enter your city">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="state">State</label>
<div class="col-sm-4">
<input type="text" ng-model="state" class="form-control" placeholder="Enter your state">
</div>
<!-- </div>
<div class="form-group"> -->
<label class="control-label col-sm-2" for="phone">Phone</label>
<div class="col-sm-4">
<input type="phone" ng-model="phone" ng-change="getPhoneFax()" class="form-control" placeholder="Enter your phone number">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="zipcode">Zip Code</label>
<div class="col-sm-4">
<input type="text" ng-model="zipcode" class="form-control" placeholder="Enter your Zip Code">
</div>
<!-- </div>
<div class="form-group"> -->
<label class="control-label col-sm-2" for="fax">Fax</label>
<div class="col-sm-4">
<input type="phone" ng-model="fax" class="form-control" placeholder="Enter your fax number">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email</label>
<div class="col-sm-10">
<input type="text" ng-model="email" class="form-control" placeholder="Enter your email address">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="website">Website</label>
<div class="col-sm-10">
<input type="text" ng-model="website" class="form-control" placeholder="Enter your website address">
</div>
</div>
</div>
<h4>60-word Description</h4>
<div class="col-md-offset-1">
<div class="form-group">
<label class="control-label col-sm-2" for="description"></label>
<div class="col-sm-10">
<div>You have used <span class="wordCount">{{description|wordCounter}}</span> of your allowed 60 words.</div>
<textarea ng-model="description" class="form-control" rows="4" required></textarea>
<span class="help-block">Your 60 word, plain text only description begins after the listing header. You will receive a proof for approval prior to publication.</span>
</div>
</div>
<div class="col-md-offset-3 col-sm-6" style="background:#ddd; padding:15px; margin-top:50px;">
<strong>Live preview of listing</strong>
<div style="background:#fff; border:5px solid #eee; padding:15px; line-height:1em;">
<strong><span class="text-uppercase" style="font-size:1.3em;" ng-show="companyFirm">{{companyFirm}}<br /></span>
<span ng-show="contact">{{contact}}<br /></span></strong>
<span style="font-weight:500;">
<span ng-show="address">{{address}}<br /></span>
<span ng-show="city">{{city}}, </span><span ng-show="state" class="text-uppercase">{{state}}</span> <span ng-show="zipcode">{{zipcode}}</span><br />
<span ng-show="phone">{{phone}} / </span><span ng-show="fax">Fax: {{fax}}<br /></span>
<span ng-show="email">{{email}}<br /></span>
<span ng-show="website">{{website}}<br /></span>
</span>
<span style="color:#787878;">{{description}}</span>
</div>
</div>
<div class="clearfix"></div>
</div>
http://plnkr.co/edit/1oqneNRXuTXhiqE7vKWw?p=catalogue
If I understand question correctly, in controller You can use standard js concatenate:
$scope.phoneFax = function() {
//You can also save result in variable;
return ($scope.phone ? $scope.phone : '')
+ ($scope.phone && $scope.fax ? ' / ' : '')
+ ($scope.fax ? 'Fax: ' + $scope.fax : '');
};
Template:
<span>{{phoneFax()}}</span>
Also you can make it directly in the template:
<span ng-show="phone">{{phone}}</span>
<span ng-show="fax && phone"> / </span>
<span ng-show="fax">Fax: {{fax}}<br /></span>

Resources