Angular Virtual Replay Material (on demand) repeats the first loaded piece of elements twice

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();
...
+4
source share

Source: https://habr.com/ru/post/1629699/


All Articles