I Am trying to fetch data from http, json array and display in list view and there is over 1000 items and loading all of them at once makes scrolling so laggy and am trying to load 20 items first and when scrolled down i want to load more 20 items but my code is not working. Can anyone help me out.
HTML
<ion-content ng-controller="ListController" on-infinite-scroll="addMoreItem" class="has-subheader" scroll-watch >
<ion-list >
<ion-item href="{{ item.url }}.jpg" ng-repeat="item in id | limitTo:numberOfItemsToDisplay" class="item-thumbnail-left item-text-wrap" >
<img src="{{ item.thumbnailUrl }}.jpg" alt="Photo">
<h2>
{{item.id}}
</h2>
<p>{{item.title}}</p>
</ion-item>
</ion-list>
</ion-content>
AngularJS
.controller('ListController',['$scope','$http',function($scope,$http){
$http.get('http://jsonplaceholder.typicode.com/photos').success(function(data){
$scope.id = data;
})
$scope.numberOfItemsToDisplay = 20; // number of item to load each time
$scope.addMoreItem = function(done) {
if ($scope.item.length >= $scope.numberOfItemsToDisplay)
$scope.numberOfItemsToDisplay += 20; // load 20 more items
done(); // need to call this when finish loading more data
}
}])
When dealing with huge lists, ionic suggest that you should use the collection-repeat directive instead of ng-repeat cause it gives a far more better performance. collection-repeat renders into the DOM only as many items as are currently visible and thats how it keeps the performance up. Please read more on the official doc here: collection-repeat
I suggest solving it through infinite-scroll.. :)
Related
I have a problem with pagination, i want to make a push to some pages with the same instruction. This is the instruction:
gotoCollection(idCollection){
this.navCtrl.push(idCollection + 'Page'); }
Depending of the CollectionId parameter the push go to one page or another, but the problem is that if i put in push directly the name, for example testPage it works but if i contruct testPage like idCollection+'Page' it doesn't work.
It's because one is testPage and the other 'testPage'?
That's my template code:
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col *ngFor="let collection of collections" col-6 col-sm-3 col-md-3 col-lg-2 col-xl-2>
<img (click)="gotoCollection(collection.id)" class="card-size" [src]="collection.url">
<p><strong>The collection ID is: {{collection.id}}</strong></p>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Thanks!
You have 2 options.. have logic that says something like if id == 1 then this.navCtrl.push(1Page) else if (id = 2) etc ... in which case you need to import all of your pages beforehand. The other option is to use Lazy Loading, and there you can use strings to open the page.
Here is an example of Lazy Loading app that uses it from the creators of ionic github.com/mhartington/lazyLoad2-components.
I am attempting to filter a list of items the code below worded fine in angular js on the web but we can't expect Ionic to work now can we?
<ion-list *ngIf="items.length">
{{items[0].title}}
<ion-item ng-repeat="item in items | filter:searchLog">
{{item == undefined}}
<!--<ion-icon name="clipboard" item-left></ion-icon>
<h2><b>Title: {{item.title}}</b></h2>
<h3><b>Caller: {{item.caller.name}} - {{item.caller.number}}</b></h3>
<h3><b>Location: {{item.caller.location}}</b></h3>
<h3><i>Dispatcher: </i>{{item.dispatcher.name}} at {{item.timeStamp}}</h3>
<h3><b>Dropped: {{item.canceled}}</b></h3>
<h3 style="white-space: normal;"><i>Details:</i> {{item.details}}</h3>-->
</ion-item>
</ion-list>
This is what my screen shows:
car out of gas
true
For the life of me I cannot understand this because if I print {{ items[0].title }} it works fine in the repeat list meaning that it is not giving me this item object back from the ng-repeat call. What is even weirder is that *ngFor works but I cannot filter it :-( Please help
TL;DR: ng-repeat in angular is returning one undefined object.
Use *ngFor with pipe (i.e. filter). If it is still not working then there is some problem with your pipe (filter). Code should look like below:
<ion-list *ngIf="items.length">
{{items[0].title}}
<ion-item *ngFor="let item of items | searchLog">
<ion-icon name="clipboard" item-left></ion-icon>
<h2><b>Title: {{item.title}}</b></h2>
<h3><b>Caller: {{item.caller.name}} - {{item.caller.number}}</b></h3>
<h3><b>Location: {{item.caller.location}}</b></h3>
<h3><i>Dispatcher: </i>{{item.dispatcher.name}} at {{item.timeStamp}}</h3>
<h3><b>Dropped: {{item.canceled}}</b></h3>
<h3 style="white-space: normal;"><i>Details:</i> {{item.details}}</h3>
</ion-item>
</ion-list>
I am new to pagination and I found this directive which is highly sought after for Angular JS from what I have read. I am trying to implement the pagination to work with a my custom pagination html/css layout I have created.
The pagination slightly works as the number of pages show up correctly and the number of items being shown is correct as I specified. The problem however is clicking for example page 2 in the pagination list does not load the next list of 5 items. It simply stays on the same list.
I am a bit confused how to use all the parts properly of this directive so I believe I am doing something wrong with implementing this directive.
The guides I am following is found here which is the same as the repository above.
Downloaded files and added to project:
dirPagination.js
My HTML is as follows:
<div id="pages" ng-if="1 < pages.length || !autoHide">
<span ng-class="{ active : pagination.current == pageNumber,
disabled : pageNumber == '...' }" class="pagenumber"
dir-paginate="pageID in controller.list| filter:q | itemsPerPage:
controller.pageCount" current-page="controller.currentPage">
{{ pageID.id }}
</span>
</div>
<div class="myResults" dir-paginate="results
in controller.list| filter:q | itemsPerPage: 5" current-page="1">
<div class="listFigures">
<figure class="imageList">
<img ng-src="{{results.image}}" ng-alt=
{{results.imageAlt}}" ng-title=
{{results.imageTitle}}" />
</figure>
</div>
</div>
In my controller I have pageCount set based on how many items (it is used as a parameter and works for showing how many pages for now):
vm.pageCount=2;
vm.currentPage = 1;
Working:
The list of pages is showing, following the code above you will see that it is at 8 pages.
Only 5 items are displaying as indicated
Not working:
Clicking on another page (in this case 2) does not bring me to another page of data. The list does not get refreshed. Clicking on another page number keeps the same list of 5 items displaying. There are a total of 8 items, with 5 being displayed clicking on the 2nd page number should show the last 3.
Posts researched:
dirPagination does not work (Angular JS pagination)
Pagination with AngularJS?
dir-pagination directive angularjs : is there any way I can get all the records of current page in pagination?
I am confused about how to get this working as well if my implementation is completely off. I have read a few posts as well as try do follow the guide in the repository however I am not understanding how to use it correctly. I am interested in finding out how to implement this pagination directive with custom html/css and not using the dirPagination.tpl.html template.
Following best practices you can read here for standard Angular.
You hardcoded your current page in the directive at the end:
<div class="myResults" dir-paginate="results in controller.list| filter:q | itemsPerPage: 5" current-page="1">
To get it working you need to set it to the variable that holds your current page. You can compare your code to the plunker provided by Pagination Directive http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview at line 42.
After picking apart the code on Plunker found here as well as the template that comes with the download of the directive dirPagination.tpl.html I found out how to successfully utilize is without using the template. You cannot skip anything. Must use lists must use most of the tags provided by the template that are being used with dirPagination.js.
Here is the working solution. Only thing that required changing was in the html:
<div class="results">
<dir-pagination-controls on-page-change="pageChangeHandler(newPageNumber)">
</dir-pagination-controls>
<div class="pages" ng-if="1 < pages.length || !autoHide"
class="pagenumber pagination" dir-paginate="pageID in
controller.list| filter:q | itemsPerPage:5"
ng-class="{ active : pagination.current == pageNumber, disabled :
pageNumber == '...' }">
<ul class="pagination" ng-if="1 < pages.length || !autoHide">
<li ng-repeat="pageNumber in pages track by tracker(pageNumber,
$index)" ng-class="{ active : pagination.current ==
pageNumber, disabled : pageNumber == '...' }">
<a href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }}
</a>
</li>
</ul>
</div>
</div>
Feel free to copy past all that html in your document and use classes I made:
results
pages
pagination
To change the CSS however you like.
Note: Pagination class cannot be removed, even if you take it out of your html if you check you elements when you run the page on the browser you will see that it is placed back in automatically.
Temporary Note: When I figure out how to show the Number of pages in an above tag such as h1 I will add that to my answer.
I'm building an ionic app. I have a state where the user can see all of their posts. Each post has many fields, one of which is 'active' - boolean field.
I'm rendering the list by:
<ion-item ng-repeat="post in posts | filter:{active:true}" ng-click="goToPost(post.id)"
class="item item-thumbnail-left">
<some fields here />
</ion-item>
Then the user has an option to deactivate a post.
<ion-option-button class="button-assertive" ng-click="deactivate(post.id, $index)">
DEACTIVATE
</ion-option-button>
This option makes a request to the backend, and also it locally sets the active field of the post into "false". After the deactivation is complete, I can't get the ng-repeat to re-filter the list - since the current post should no longer appear in the list of active posts.
I tried $scope.$apply() and it threw the $digest error... I tried to add ng-change and ng-model, and that didn't work either. I also tried reloading the state completely, but for some reason, I can't get this done.
Can anyone help me? Thanks in advance!
Look at the fiddle
<div ng-app="app" ng-controller="demoController">
<ion-item ng-repeat="post in data | filter:{activated:true}" ng-click="deativate(post.id)">
{{post.col1}} {{post.activated }} {{"click Me"}} </br>
</ion-item>
</div>
var app= angular.module("app",[]);
app.controller('demoController', ['$scope',
function($scope) {
$scope.data = [
{id:1,col1:"abc",activated:true},
{id:2,col1:"abc1",activated:true},
{id:3,col1:"abc2",activated:true},
{id:4,col1:"abc3",activated:true},
{id:5,col1:"abc4",activated:false},
{id:6,col1:"abc5",activated:true},
];
$scope.deativate = function(id){
angular.forEach($scope.data,function(item){
if(item.id === id){
item.activated = false;
}
})
}
}]);
and for your code you can share your code snippet.
Like the title says, I'm trying to assign a list from a $http request and then see that list in a view.
I believe the problem is the view is shown before the data loads, if I understand ionic correctly. And the view is never updated when the variables change.
I'm told resolves are one way of fixing this but I'd prefer for the view to change and then show a loading indicator while it waits for the http request to finish, and then show the list.
Thanks!
Edit: I think I need to add the way I'm loading the data is through ng-init in the html file, which seems wrong too. Is there a better way altogether?
view html file:
<ion-view view-title={{ListName}} ng-init="getList()">
<ion-content ng-controller="ListCtrl">
<ion-list>
<ion-item ng-repeat="item in list"
class="item-thumbnail-left">
{{item.id}}
<img ng-src="{{item.thumbnail}}">
</ion-item>
</ion-list>
</ion-content>
</ion-view>
controller snippet:
.controller('ListCtrl', function($scope){
$scope.list = []
$scope.ListName = ''
$scope.getList = function(){
$scope.ListName = 'list'
$scope.list = [{id: 1, thumbnail:null}, {id: 2, thumbnail:null},{id: 3, thumbnail:null} ,{id: 4, thumbnail:null}]
}
})
the list is actually gotten in a http request that returns a promise but this gives me the same problem. It's something annoyingly basic that I just don't understand about ionic yet
Dinesh answered my question. Putting the ng-controller in the ion-view was all I needed to do!