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