我想在md-autocomplete大列表中显示(大约50 000条记录)。 自动完成指令使用mdVirtualRepeat,它提供无限滚动。我无法找到通过md-on-demand选项的方法。也许有人想方设法做到这一点。 我非常感谢您提供的任何帮助
更新
我忘了分享代码。我对代码性能没有任何问题,但是当列表呈现时,应用程序没有响应。在我看来,问题在于虚拟渲染,它仍然试图渲染整个列表而不是可见部分。
PS。我知道$ scope很糟糕,但我是以角度形式使用这个例子。
JS
$scope.to.options = [];
$scope.ctrl = {
selectedItem: null,
isDisabled: $scope.to.disabled,
noCache: $scope.to.noCache,
placeholder: $scope.to.placeholder || 'Wybierz element',
minLength: $scope.to.minLength || 0,
querySearch: querySearch,
searchTextChange: searchTextChange,
selectedItemChange: selectedItemChange,
delay: $scope.to.delay || 350,
options: []
};
if ($scope.to.dictId) {
dictionariesRepository.get($scope.to.dictId).then(function (res) {
$scope.ctrl.options = createOnDemandObject(res.Data.map(function (elem) {
return { value: elem[$scope.to.FieldVal], name: getLabel($scope.to.FieldFormula, elem) };
}));
var val;
if ((val = getValue())) {
var selected = $scope.ctrl.options.filter(function (elem) {
return elem.value == val;
})[0];
if (selected) {
$scope.ctrl.selectedItem = selected;
}
}
});
}
function createOnDemandObject(list) {
return {
list: list,
getLength: function () {
return this.list.length
},
getItemAtIndex: function (index) {
return this.list[index];
}
}
}
function searchTextChange(text) {
//$log.info('Text changed to ' + text);
}
function selectedItemChange(item) {
var getter = $parse($scope.options.key);
var setter = getter.assign;
setter($scope.model, item[$scope.to.FieldVal]);
}
function querySearch(query) {
var options = $scope.ctrl.options;
return query ? options.filter(createFilterFor(query)) : options;
}
function createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(elem) {
return (elem.name.indexOf(lowercaseQuery) === 0);
};
}
HTML
<md-autocomplete ng-disabled="ctrl.isDisabled" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
md-delay="ctrl.delay"
md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)"
md-items="item in ctrl.querySearch(ctrl.searchText)"
md-on-demand
md-item-text="item.name" md-min-length="ctrl.minLength" placeholder="{{ctrl.placeholder}}">
<md-item-template>
<span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.name}}</span>
</md-item-template>
<md-not-found>
Nie znaleziono pasującego wyniku dla "{{ctrl.searchText}}".
</md-not-found>
</md-autocomplete>