将md-on-demand传递给md-autocomplete

时间:2016-09-16 16:53:54

标签: angularjs angular-material md-autocomplete

我想在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>

0 个答案:

没有答案