<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.
Related
This is what I have used to achieve pagination:
<pagination total-items="reportCount" items-per-page="itemsPerPage" page="currentPage" ng-change="pageChanged()" ng-model="currentPage"></pagination>
How do I get it show the range of entries currently shown.. like.. 1-10 of 46 entries. 11-20 of 46 and so on..
I am able to get it using the value of currentPage and itemsPerPage by doing as follows:
<span id="page_info">Showing {{(currentPage-1) * itemsPerPage + 1}} - {{currentPage * itemsPerPage}} of {{reportCount}} entries</span>
But the issue is in the last page, where the last record is not just currentPage * itemsPerPage, like.. it shows 41-50 of 46 entries.
It should work with {{Math.min((currentPage * itemsPerPage), reportCount)}} but for some reason it isn't evaluating it here.
Any ideas how to get this fixed? or any other way?
Browser Object Model(BOM) will not be directly available when angular bindings are evaluated like Math, console, location, window, etc. You can call them inside a function but not directly on inside binding (Thought there are ways to do that by keep that BOM property on $scope, I'd not recommend to do that). To make it working create a javascript function for inside a $scope and call it on binding level.
<span id="page_info">
Showing {{(currentPage-1) * itemsPerPage + 1}} - {{endCount(currentPage,itemsPerPage, reportCount)}} of {{reportCount}} entries
</span>
Controller
$scope.endCount = function (currentPage, itemsPerPage, reportCount) {
return Math.min((currentPage * itemsPerPage), reportCount);
}
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.
I'm new in Angular - Firebase development, and I am having problems to understand how to retrieve data nested in two collections.
I have a collection named "Orders", which includes a field call "auth", which is the user ID, and I have another collection that is the "User Profile", wich it's $id is the value of "auth". Inside the User Profile I have a field named roomNumber, and it's content I that I want to retrieve every time I read, in ng-repeat of the Orders.
In my view I was trying to do something like this :
<tr ng-repeat="item in items | filter: searchKeyword ">
<td align="left">{{item.$id}} - {{roomNumber(item.$id)}}</td></tr>
roomNumber is a function in my controller
$scope.roomNumber = function(id) {
var rootRef = new Firebase("https://xxxx-fire-yyyy.firebaseio.com/userProfile"+ '/' + id);
$scope.userdet = $firebaseArray(rootRef);
rootRef.on("value", function(rootSnapshot) {
var key = rootSnapshot.key();
var childKey = rootSnapshot.child("room").val();
console.log("room ", childKey)
});
return childKey
}
When I run this code and see results in my js console, strange things happend:
1. It repeat a lot of times
2. I can never get the childKey value
I have been reading Firebase documentation, but really I do not understand how to do this "silly" thing, does anybody give me a tip of how to do it?
When you bind a function to the $scope and call it within the html it expects to get an answer back right away when called. So when you query firebase and it takes its sweet time getting you back an answer, angularjs has already gotten an answer of undefined from the function.
So what is happening is that you are registering a callback when you provide the function to rootRef.on and then right after you register the callback you are returning the value of childKey. Unfortunately, childKey only gets set by the callback function (which firebase hasn't executed yet). Therefore angularjs gets an answer of undefined from your roomNumber function.
In order to make this work, you are going to have to get the room numbers beforehand and then probably add them to each of your items in $scope.items then use
<td align="left">{{item.$id}} - {{item.room}}</td></tr>
instead of
<td align="left">{{item.$id}} - {{roomNumber(item.$id)}}</td></tr>
To load all the room numbers you could call some function like this one after $scope.items has loaded
for (var i = 0; i < $scope.items.length; i++) {
var rootRef = new Firebase("https://xxxx-fire-yyyy.firebaseio.com/userProfile"+ '/' + $scope.items[i].$id);
$scope.userdet = $firebaseArray(rootRef);
rootRef.on("value", function(rootSnapshot) {
var key = rootSnapshot.key();
var childKey = rootSnapshot.val().room;
$scope.items[i].room = childKey;
});
}
It would change each of the items to have a reference to the room. Unfortunately, that list wouldn't update as the data updates, so the better solution would be to do that same query in whatever function was getting your items from the server and add the room to each item as it was being added to the items list.
To fix the issue with childKey not reading you need to use this:
var childKey = rootSnapshot.val().room;
instead of this:
var childKey = rootSnapshot.child("room").val();
console.log("room ", childKey)
Reference: https://www.firebase.com/docs/web/guide/retrieving-data.html
I'm using NodeJS, ANgularJS, and MongoDB with mongoose
Here is my model :
var PostSchema = new mongoose.Schema({
nomReseau : String,
corps : String,
etat : String,
section : String
});
I got a function that change the attribute etat:
$scope.passer = function(index){
var post = $scope.posts[index];
post.etat = "enCours";
Posts.update({id: post._id}, post);
$scope.editing[index] = false;
}
I'm using a ng-repeat for show object in my database :
<ul>
<li ng-repeat="post in posts ">
<p>
<a ng-show="!editing[$index]" href="#/{{post._id}}">{{post.corps}}</a>
</p>
<button ng-show="!editing[$index]" ng-click="passer($index)">Passer</button>
</li>
</ul>
I can see all post in my database and when I click on the button this works perfectly the attribute etat change and all is fine.
But when I add a filter in the ng-repeat like this :
<li ng-repeat="post in posts | filter:{ etat:'aTraiter'} ">
The filter works great I have all post with the attribute etat:'aTraiter'
But if I click on my previous button and change the attribute etat nothing change and I try with other functions they all work wihout the filter but when I put it nothing work.
The problem is that $index will change if less data is shown (because you're filtering). you could use directly post variable
ng-click="passer(post)"
and your function should be something like
$scope.passer = function(post){
post.etat = "enCours";
Posts.update({id: post._id}, post);
var index = $scope.posts.findIndex(function(p) { /* comparison to get original index */ }); /* keep in mind findIndex is not supported on IE, you might want to use filter or for loop instead) */
$scope.editing[index] = false;
}
you could handle editing in the post variable directly. So in your passer function you can do this
post.editing = false;
and in your view
ng-show="!post.editing"
this way you won't use $index and you will prevent all issues with being updated by filters
There are bugs in AngularJS v1.4 where in certain situations the ng-repeat breaks. I upgraded to v1.6 and it went away.
Do you have any controllers/services that access $scope.editing? If so, you might be setting the $scope.editing[$index] equal a previous state where it wasn't equal to false. You may also want to consider that you are assuming $scope.editing[$index] is going to be a boolean. if it has any other type such as string or number then it will evaluate to true.
Otherwise none of your results have the attribute etat equal to 'aTraiter' so they aren't showing. Have you verified that any of them actually do have etat equal to 'aTraiter'. You might be changing that value somewhere else. Possibly from the Passer function
I'm trying to optimize my angular/meteor code. I have a collection
Customers = new Mongo.Collection("Customers");
and the way I was displaying them was:
ng-repeat="customer in customerController.customers | filter: {customerStore: myStore} ">
and in my CustomerController
this.customers = $meteor.collection(customers);
This approach (while it works) is now starting to take up a lot of memory on the client's server as they are adding more and more stores.
So I tried to filter server side before sending information to the client.
NEW CODE:
collection code is the same
Customers = new Mongo.Collection("Customers");
ng-repeat code is different
ng-repeat="customer in customerController.getCustomers(myStore) ">
and my controller now has this method:
this.getCustomers = function(findByStore){
return Customers.find({customerStore.$ : findByStore});
}
The problem with this is that it returns a new collection each time, so angular sees it as a different object and tries to re-render the page.
https://docs.angularjs.org/error/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22msg%22:%22fn:%20regularInterceptedExpression%22,%22newVal%22:21,%22oldVal%22:19%7D%5D,%5B%7B%22msg%22:%22fn:%20regularInterceptedExpression%22,%22newVal%22:23,%22oldVal%22:21%7D%5D,%5B%7B%22msg%22:%22fn:%20regularInterceptedExpression%22,%22newVal%22:25,%22oldVal%22:23%7D%5D,%5B%7B%22msg%22:%22fn:%20regularInterceptedExpression%22,%22newVal%22:27,%22oldVal%22:25%7D%5D,%5B%7B%22msg%22:%22fn:%20regularInterceptedExpression%22,%22newVal%22:29,%22oldVal%22:27%7D%5D%5D
One common mistake is binding to a function which generates a new array every time it is called.
Someone suggested i try
return $meteor.collection(Customers.find({'customerStore.$' : findByStore}));
but then I get the error
TypeError: The first argument of $meteorCollection must be a function or a have a find function property.