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');`
Related
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 = {};
<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.
This is the form.
<div class="row" ng-controller="contactsCtrl">
<form ng-show="addFormShow">
<h3>Add Contact</h3>
<!-- Add form -->
<div class="row">
<div class="large-6 columns">
<label>Name:
<input type="text" ng-model="name" placeholder="Contact Name" required />
</label>
</div>
<div class="large-6 columns">
<label>Email:
<input type="text" ng-model="email" placeholder="Contact Email" required />
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Company:
<input type="text" ng-model="company" placeholder="Company Name" required />
</label>
</div>
<div class="large-6 columns">
<label>Work Phone:
<input type="text" ng-model="work_phone" placeholder="Work Phone" required />
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Mobile Phone:
<input type="text" ng-model="mobile_phone" placeholder="Mobile Phone" required />
</label>
</div>
<div class="large-6 columns">
<label>Home Phone:
<input type="text" ng-model="home_phone" placeholder="Home Phone" required />
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Street Address:
<input type="text" ng-model="street_address" placeholder="Street Address" required />
</label>
</div>
<div class="large-6 columns">
<label>City:
<input type="text" ng-model="city" placeholder="City" required />
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>State:
<input type="text" ng-model="state" placeholder="State" required />
</label>
</div>
<div class="large-6 columns">
<label>Zip Code:
<input type="text" ng-model="zipcode" placeholder="Zip Code" required />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="submit" value="Add Contact" class="button" />
</div>
</div>
</form>
<div class="large-10 columns">
<h3>Your Contacts (3)</h3>
<table>
<thead>
<tr>
<th width="200px">Name</th>
<th width="200px">Company</th>
<th width="25%">Email</th>
<th width="25%">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
<td>{{contact.name}}</td>
<td>{{contact.company}}</td>
<td>{{contact.email}}</td>
<td><a class="button tiny" ng-click="showEditForm(contact)">Edit</a>
<a class="button tiny alert" ng-click="removeContact(contact)">Delete</a></td>
</tr>
</tbody>
</table>
</div>
<div class="small-12 large-2 columns">
<a class="button large" ng-click="showAddForm()">+</a>
</div>
</div>
This is the controller.
'use strict';
angular.module('myContacts.contacts', ['ngRoute','firebase'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/contacts', {
templateUrl: 'contacts/contacts.html',
controller: 'contactsCtrl'
});
}])
.controller('contactsCtrl', ['$scope', '$firebaseArray', function($scope,$firebaseArray) {
var ref = new Firebase('https://mycontacts-1bb2d.firebaseio.com/contacts');
$scope.contacts = $firebaseArray(ref);
$scope.showAddForm = function(){
$scope.addFormShow = true;
}
}]);
This is pretty simple code. Its supposed to show the form when the user clicks on the '+' button. But I cant figure out why the ng-show directive is not working.
It works fine with your code, check if you have properly added ng-controller in your code.
DEMO
var myApp = angular.module('ReqWebApp', [])
myApp.controller('contactsCtrl', function contactsCtrl($scope) {
$scope.showAddForm = function(){
$scope.addFormShow = true;
}
});
<!DOCTYPE html>
<html ng-app="ReqWebApp">
<head>
<meta charset="UTF-8">
<title>New Request</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="contactsCtrl">
<form ng-show="addFormShow">
<h3>Add Contact</h3>
<!-- Add form -->
<div class="row">
<div class="large-6 columns">
<label>Name:
<input type="text" ng-model="name" placeholder="Contact Name" required />
</label>
</div>
<div class="large-6 columns">
<label>Email:
<input type="text" ng-model="email" placeholder="Contact Email" required />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="submit" value="Add Contact" class="button" />
</div>
</div>
</form>
<div class="small-12 large-2 columns">
<a class="button large" ng-click="showAddForm()">+</a>
</div>
</body>
</html>
The code works fine for me. I think you might have done some small error in adding controller. Refer the code below
<html ng-app='FormApp'>
<head>
</head>
<body ng-controller='contactsCtrl'>
<form ng-show="addFormShow">
<h3>Add Contact</h3>
<!-- Add form -->
<div class="row">
<div class="large-6 columns">
<label>Name:
<input type="text" ng-model="name" placeholder="Contact Name" required />
</label>
</div>
<div class="large-6 columns">
<label>Email:
<input type="text" ng-model="email" placeholder="Contact Email" required />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="submit" value="Add Contact" class="button" />
</div>
</div>
</form>
<div class="small-12 large-2 columns">
<a class="button large" ng-click="showAddForm()">+</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<script>
angular.module('FormApp', []).controller('contactsCtrl', ['$scope', function($scope) {
$scope.showAddForm = function() {
$scope.addFormShow = true;
}
}]);
</script>
</body>
</html>
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
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>