I am using dirPagination.js for pagination of table in angular js. I want to print all the data present in the Table. I have tried some ways but I am only able to print current page data. Can anyone let me know to print all data present in table having pagination.
Please let the question get answered instead of marking duplicate or useless question, better help.
Very Simple. Here i have done printing of all the data of table.
var popupWin;
$scope.printDiv = function(divName,loclist) {
console.log(divName)
console.log(loclist.finalarr)
localStorage.setItem('itemKey', JSON.stringify(loclist.finalarr));
popupWin = window.open('', '_blank');
popupWin.document.open();
popupWin.document.write('<html ng-app="dumb"><head><link href="css/bootstrap.min.css" rel="stylesheet"><link href="fonts/css/font-awesome.min.css" rel="stylesheet"><link href="css/custom.css" rel="stylesheet"><script src="script/lib/jquery-2.2.0.min.js"></script> <script src="script/lib/angular.js"></script><script src="script/lib/ngStorage.min.js"></script></head><body onload="window.print();window.close()" ng-controller="dumbconr"><table class="table table-striped responsive-utilities jambo_table bulk_action" style="font-size:10px;"><thead><tr class="headings"> <th>S.No</th><th>Tool</th><th>Action Done</th><th>User</th><th>Assigned To</th><th>FollowUp Date</th><th>Contact Name</th><th>Company Name</th><th>Phone</th><th>City</th><th>Product</th><th>Dealing Product</th><th>Result</th><th>Action to be done</th><th>Next FollowUp</th></tr></thead><tbody><tr class="even pointer" ng-repeat="data in lli"><td>{{$index+1}}</td><td>{{data.tool}}</td><td>{{data.followups.actiondone}}</td><td>{{data.empid}}</td><td>{{data.followups.assignedto}}</td><td>{{data.followups.followup| date: "dd MMM yyyy"}}</td><td>{{data.name}}</td><td>{{data.firmname}}</td><td>{{data.contact}}</td><td><span ng-if="data.city">{{data.city}}<span><span ng-if="!data.city">-<span></td><td>{{data.product}}</td><td>{{data.dproduct}}</td><td>{{data.followups.result}}</td><td>{{data.followups.nextaction}}</td><td>{{data.followups.nextfollowup | date: "dd MMM yyyy"}}</td></tr></tbody></table><script>var app=angular.module("dumb", ["ngStorage"]).controller("dumbconr",function($scope, $localStorage, $rootScope){ $rootScope.lli=JSON.parse(localStorage.getItem("itemKey"));})</script></body></html>');
popupWin.document.close();
}
Here
loclist is the array that need to print.
i have created the html page in the controller and based on that i am rendering the data and also checking the required conditions.
Using the Localstorage get and set method able to get data.
Related
I am new in angular.js, I am creating a suggestion box for my form using typeahead directive referring this example, but my data is coming from json file (webservice call).
I am getting an error on this line
<input ng-model="selected" ng-change="getdata()" typeahead="dataAddress for dataAddress addressData" | filter:$viewValue | limitTo:2/>
Angular code:
$scope.getdata =function(){
$http.get("address.json&id=2&q="+$scope.selected).then(function (res) {
$scope.addressData = res.data.response.topSuggestions;
console.log($scope.addressData)
});
};
json content:
{"response":{"sequenceNumber":2,"topSuggestions":[{"address":{"detectedLanguage":"en","isComplete":true,"searchBarString":"aaaaaasdasdd","string":"aaaaaasdasdd","municipalityName":"aaa","postalCode":"1007"}}]}}
I want to select address and string.
I called the service for each single character the user hit by adding that, search.
Please help.
Thanks in advance!
<tr dir-paginate="plan in access |itemsPerPage: 10" total-items="planCount" current-page="current">
<td>{{plan._id}}</td>
<td>{{plan.name}}</td>
<td>{{plan.email}}</td>
<td>{{plan.contactNumber}}</td>
<td>{{plan.accessToken}}</td>
<td>{{plan.downloadSpeed | toMBPS}}</td>
<td>{{plan.uploadSpeed | toMBPS}}</td>
<td>{{plan.issueTime}}</td>
and this is the directive
<div class="text-center">
<dir-pagination-controls auto-hide="false" on-page-change="pageChanged(newPageNumber)"></dir-pagination-controls>
</div>
and this is the angular code
$scope.planCount = 0;
$scope.current = 1;
$scope.pageChanged = function(value) {
console.log("Going to page" + value);
}
The data is coming from the server, but that is working fine. I have logged the data, and I am receiving the complete data. Also, it is the registering the changed page number correctly.
Still, it only shows the first ten items, doesn't matter on what page number I am.
Note: Don't mind the incomplete html. That is the only relevant part to my situation. I can't post the whole code.
Also, I am using this in a different page, but it's working fine in it.
<tr dir-paginate="plan in access |itemsPerPage: 10" total-items="planCount" current-page="current">
From above line remove total-items="planCount". It'll work here too.
I receive this datetime value from my Web API 2 backend:
2015-12-11T09:15:49.403
That is fine and should remain such, but, on the receiving end (AngularJS) that needs to be converted into:
11-12-2015
Without the time information, how to achieve this for an input field?
You can save with string format in your database as follow this
dateTime.ToString("dd-MM-yyyy");
Really you can't achieve DateTime format whit this dd-MM-yyyy, becous in your database will saved for example 11-12-2015 00:00:00
Here is an example of how to use a filter:
var app = angular.module('app',[]);
app.controller('ctrl', function($scope) {
$scope.date = new Date();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<span>{{date | date:'yyyy-MM-dd'}}</span>
</div>
I am using xml2json to translate a xml file from medline. I am stuck on using ng-repeat to display the information I need. I need to display the title,url and see-reference. When i have one health-topic in the xml file The title and url display fine. When I add more health-topics it does not work. any help is appreciated, thanks
plunkr
<table>
<tr ng-repeat="topic in topics">
<td>{{topic._title}}</td>
<td>{{topic._url}}</td>
<td>{{topic.see-reference}}</td>
</tr>
</table>
<pre>{{topics | json}}</pre>
The structure of your XML is like this:
<health-topics total="1909" date-generated="01/03/2015 02:30:35">
<health-topic title="Abdominal Pain">
</health-topic>
<health-topic title="Abdominal Pain">
</health-topic>
<health-topic title="Abdominal Pain">
</health-topic>
xml2json creates an object for every element. The properties of the object are the element's attributes (starting with an underscore) and the child elements. In your case:
//health-topics
{
_total: "1909",
_date-generated: "01/03/2015 02:30:35",
health-topic: [
{
_title: Abdominal Pain"
...
health-topic is an array containing the topics. If you have a single topic wrapped with health-topics it would be:
//health-topics
{
_total: "1909",
_date-generated: "01/03/2015 02:30:35",
health-topic: {
_title: Abdominal Pain"
...
health-topic is now an object. But maybe a single topic wouldn't even be wrapped with a health-topics element. That's something only you know.
All in all the data structure is different depending on the number of topics. You would need to check and adapt to that. The code working for multiple topics would be
$scope.topics = $scope.dom['health-topics']['health-topic']
Actual Date coming from JSON
Need to format it as below .
Effective Date : 2010-08-31 (trim the time stamp)
End Date : 2010-08-31 (trim the time stamp)
Am using the below code for Formatting the date inside Ng-Repeat.
<li ng-repeat="product in data | startFrom:currentPage*pageSize | limitTo:pageSize"
ng-click="getAttributes(product)">
{{product.prod_start_date| date:'MM/dd/yyyy'}}
{{product.prod_end_date| date:'MM/dd/yyyy'}}
</li>
But it doesnt work still displays the same.
Should the Date be passed as new Date as shown in the below jsfiddle Example
http://jsfiddle.net/southerd/xG2t8/
Note sure how to do that inside ng-repeat.?? Kindly help me on this. Thanks in Advance
I created my own filter to address this.
The date filter cant take a string, needs a date object.
.filter('cmdate', [
'$filter', function($filter) {
return function(input, format) {
return $filter('date')(new Date(input), format);
};
}
]);
then you can do:
{{product.prod_start_date| cmdate:'MM/dd/yyyy'}}
I use moment.js for my UI date time handling (there even a nice angular-moment bower package as well)
http://momentjs.com
https://github.com/urish/angular-moment
usage:
<span>{{product.prod_start_date | amDateFormat:'MM/dd/yyyy'}}</span>
It has a bunch of other options as well with relative dates etc.
I have updated the controller that you showed in the fiddle and here is your updated filter
Here I made use of the $filter('date') which is a feature of Angular itself in order to format the date in the desired format.
Here is the controller:
function Scoper($scope,$filter) {
$scope.s = "2012-10-16T17:57:28.556094Z";
var dateObj = new Date($scope.s);
$scope.dateToShow = $filter('date')(dateObj,'yyyy-MM-dd');
console.log($scope.dateToShow);
}