Attempting to use md-select to showcase a large amount of data is causing the browser to freeze upon opening. To address this, I tried implementing md-virtual repeat within md-select for improved performance. However, the code doesn't seem to be functioning as expected. Is there an error in my approach?
<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_;
}
}
};