在angularjs中滚动下拉选项的延迟加载

时间:2018-04-09 05:11:21

标签: javascript angularjs angularjs-directive mean-stack

我正在研究MEAN堆栈应用程序,我在其中使用以下自定义指令定义下拉列表。此下拉列表显示数组中的可用变量(大约70K选项)。

.directive('inputDropdown', function($parse) {

    var template = 
        '<input class="form-control" ng-model="ngModel" ng-disabled="disabled" ng-focus="setDirectiveList()" ng-blur="removeDirectiveList()">' +
        '<div class="dropdown dropdown1" input-dropdown="increaseLimit()" ng-init="limit=20;" ng-click="setDirectiveList()">' + 
            '<div class="form-control" ng-repeat="value in selectedList | filter:ngModel | limitTo:limit">' +
                '<div ng-mousedown="select($event, value)">{{value}}</div>' + 
            '</div>' +
        '</div>';

    return {
        restrict: 'EA',
        require: '^form',
        scope: {
            ngModel: '=',
            list: '=',
            onSelect: '&',
            disabled:'=ngDisabled'
        },
        template: template,
        link: function(scope, element, attrs,mapController) {
            element.addClass('input-dropdown');

            var handler = $parse(attrs.inputDropdown);
            element.scroll(function (evt) {
              var scrollTop    = element[0].scrollTop,
                  scrollHeight = element[0].scrollHeight,
                  offsetHeight = element[0].offsetHeight;
              if (scrollTop === (scrollHeight - offsetHeight)) {
                $scope.$apply(function () {
                  handler($scope);
                });
              }
            });

            if(scope.$parent.setDirty)
            {
                scope.makeFormDirty = mapController.$setDirty();
            }
            scope.select = function(e, value) {
                scope.ngModel = value;
                // scope.onSelect({$event: e, value: value});
                scope.makeFormDirty = mapController.$setDirty();
            };
            scope.setDirectiveList = function() {
                // debugger;
                scope.selectedList = scope.list;//scope.$parent.variables;
            }
            scope.removeDirectiveList = function() {
                scope.selectedList = [];
            }
        }
    };
})

我要做的是使用limitTo选项,当下拉滚动条点击底部时,将显示变量计数增加一些值。 increaseLimit函数在我的控制器中定义为:

 $scope.increaseLimit = function () {
        if ($scope.limit < $scope.variables.length) {
          $scope.limit += 20;
        }
 };

其中$scope.variables包含70K个条目。我不确定我是否正在添加increaseLimit来纠正div或滚动功能是错误的。

我希望在我的下拉列表中实现this类型的加载。如何在我的自定义指令input-dropdown中添加它。我试过但没有成功。

请帮助。

0 个答案:

没有答案