I want to use md-select to display a lot of data to the user. When opening the md-select, the browser freezes. So as a solution i want to use md-virtual repeat inside md-select for better performance. But the code isn(t just working out for me. Am I doing something wrong here?
<md-input-container flex>
<label>test</label>
<md-select ng-model="$ctrl.haha">
<md-virtual-repeat-container id="vertical-container">
<md-option md-virtual-repeat="item in ctrl.infiniteItems" md-on-demand ng-value="item" ng-selected="$first">
{{item}}
</md-option>
</md-virtual-repeat-container>
</md-select>
</md-input-container>
#vertical-container {
height: 256px;
}
this.infiniteItems = {
numLoaded_: 0,
toLoad_: 0,
items: [],
// Required.
getItemAtIndex(index) {
if (index > this.numLoaded_) {
this.fetchMoreItems_(index);
return null;
}
return this.items[index];
},
// Required.
getLength() {
return this.numLoaded_ + 5;
},
fetchMoreItems_(index) {
if (this.toLoad_ < index) {
this.toLoad_ += 20;
for (let i = 0; i < 10000; i++) {
this.items.push(i);
}
this.numLoaded_ = this.toLoad_;
}
}
};