samedi 20 février 2016

Angular Material virtual repeat, select checkbox changes more than one item

I'm working on Angular (version 1.4.9) Material virtual repeat deferred loading and slightly modified the example code.

When I select one checkbox in the list, a second one is selected. I don't know how to solve this behaviour. But I think it has something to do with the repeated rows of the list. Any ideas how to fix that?

html code:

...
<div class="virtualRepeat">
<md-virtual-repeat-container id="vertical-container">
  <md-list>
    <md-list-item md-virtual-repeat="item in listCtrl.teaData" md-on-demand class="md-2-line" flex>
      <md-checkbox md-no-ink class="md-primary" ng-click="emptyFunction()" ng-model="item.active" aria-label="select"></md-checkbox>
      <div class="md-list-item-text">
        Name: {{item.name}}
        ID: {{item.id}}
      </div>
    </md-list-item>
  </md-list>
</md-virtual-repeat-container>
</div>
...

Code from the controller creating the list:

...
var vm = this;

var ListItems = function() {
  this.count = 0;
  this.pageSize = 15;
  this.loadedPages = {};
  this.listData = [];
  this.getTeaCount_();
}

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(tea) {
    for(var i = 0; i < tea.items.length; i++) {
      this.listData.push({
        name: tea.items[i].name,
        id: tea.items[i].id
      });
    }
  }));

}

ListItems.prototype.getTeaCount_ = function() {
  RestFactory.fetchCount().then(angular.bind(this, function(count) {
    this.count = count;
  }));
}

vm.teaData = new ListItems();




Aucun commentaire:

Enregistrer un commentaire