I am working on Angular (version 1.4.9). The material is virtual re-delayed loading and slightly changed the example code.
My code loads 15 elements per page from a REST resource and displays them in a list. But my list shows the first 15, then repeats the first 15 (error!) , And then loads the next group of elements (from 16 to 30, etc.). I can not find the problem, any ideas why this is happening?
Code from html file:
<div class="virtualRepeat">
<md-virtual-repeat-container id="vertical-container">
<md-list>
<md-list-item md-virtual-repeat="user in listCtrl.userData" md-on-demand class="md-2-line" flex>
<div class="md-list-item-text">
Name: {{user.name}}
ID: {{user.id}}
</div>
</md-list-item>
</md-list>
</md-virtual-repeat-container>
</div>
Code from the controller:
...
var vm = this;
var ListItems = function() {
this.count = 0;
this.pageSize = 15;
this.loadedPages = {};
this.listData = [];
this.getUserCount_();
}
ListItems.prototype.getItemAtIndex = function(index) {
var currentPage = Math.floor(index / this.pageSize);
var page = this.loadedPages[currentPage];
if (page) {
return this.listData[index];
} else if (page !== null) {
this.getPage_(currentPage);
}
}
ListItems.prototype.getLength = function() {
return this.count;
}
ListItems.prototype.getPage_ = function(currentPage) {
this.loadedPages[currentPage] = null;
this.loadedPages[currentPage] = [];
var pageOffset = currentPage * this.pageSize;
for (var i = pageOffset; i < pageOffset + this.pageSize; i++) {
this.loadedPages[currentPage].push(i);
}
RestFactory.fetchCurrentPage(currentPage).then(angular.bind(this, function(users) {
for(var i = 0; i < users.items.length; i++) {
this.listData.push({
name: users.items[i].name,
id: users.items[i].id
});
}
}));
}
ListItems.prototype.getUserCount_ = function() {
RestFactory.fetchUserCount().then(angular.bind(this, function(count) {
this.userCount = count;
}));
}
vm.userData = new ListItems();
...
Johna source
share