Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/74.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Java angularJS ng下拉列表multiselect实现无限滚动的滚动事件_Java_Html_Css_Angularjs - Fatal编程技术网

Java angularJS ng下拉列表multiselect实现无限滚动的滚动事件

Java angularJS ng下拉列表multiselect实现无限滚动的滚动事件,java,html,css,angularjs,Java,Html,Css,Angularjs,我已经使用AngularJS和bootstrap创建了一个多选下拉列表,并添加了搜索和可滚动选项,它运行良好。 在多选下拉滚动条中滚动时,我需要实现无限滚动。它不适用于多选下拉,但无限滚动适用于div。 我看到了onItemSelect和onItemDeselect的事件,但没有找到任何用于滚动多选下拉列表的事件 我包括以下代码: <div ng-dropdown-multiselect="" options="user" selected-model="userModel" extr

我已经使用AngularJS和bootstrap创建了一个多选下拉列表,并添加了搜索和可滚动选项,它运行良好。 在多选下拉滚动条中滚动时,我需要实现无限滚动。它不适用于多选下拉,但无限滚动适用于div。 我看到了onItemSelect和onItemDeselect的事件,但没有找到任何用于滚动多选下拉列表的事件

我包括以下代码:

<div  ng-dropdown-multiselect=""  options="user" selected-model="userModel" extra-settings="example14settings" when-scrolled="loadMore()"></div>

$scope.example14settings = {
    scrollableHeight: '100px',
    scrollable: true,
    enableSearch: true
};

$http.get('user').success(function(response){
//users list has huge data need to implemented infinite scroll
          $scope.userList = response;
          $scope.users = $scope.userList.slice(0,10);
});
 $scope.loadMore = function (){
       $scope.user = $scope.users.slice(0, $scope.user.length + 8);
 };
下面是用于外部div的无限滚动代码,不在mutlselect下拉列表中,也在搜索之后,它不用于下一个数据集的无限滚动

代码:

如何在角形多选下拉列表中添加无限滚动?
此外,当用户搜索某个内容时,无限滚动应该在向下滚动时对搜索的数据起作用?

从您在此处发布的内容中,我可以看到您没有应用loadMore功能,但这可能不是您唯一的问题。试试这个:

angular.module('App').directive('whenScrolled', function() {
    return function(scope, elm, attr) {
        var raw = elm[0];

        elm.bind('scroll', function() {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                scope.$apply('loadMore()');
            }
        });
    };
});
尝试使用ng下拉列表multiselect,如下所示:

<ng-dropdown-multiselect when-scrolled="loadMore()"></ng-dropdown-multiselect>"

您需要绑定到元素而不是属性。

从您在此处发布的内容中,我可以看到您没有应用loadMore函数,但这可能不是您唯一的问题。试试这个:

angular.module('App').directive('whenScrolled', function() {
    return function(scope, elm, attr) {
        var raw = elm[0];

        elm.bind('scroll', function() {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                scope.$apply('loadMore()');
            }
        });
    };
});
尝试使用ng下拉列表multiselect,如下所示:

<ng-dropdown-multiselect when-scrolled="loadMore()"></ng-dropdown-multiselect>"

您需要绑定到元素而不是属性。

感谢您的响应。我在html中添加when scrolled=loadMore,向下滚动时调用loadMore。无限滚动在div中工作,我需要把它应用到ng下拉多选滚动条上。你的问题是你在div上调用指令,而不是在select上调用指令。您的选择是一个属性而不是一个元素。您知道如何在sleect上调用它吗?我正在使用ng下拉多选,设置如下?是否有类似onselect事件的滚动事件$scope.example14设置={scrollableHeight:'100px',scrollable:true,enableSearch:true};您是否尝试使用ng下拉列表multiselect作为元素而不是我上面建议的属性?我查看了ng dropdown multiselect的代码,它说它可以是属性或元素。感谢您的回复。我在html中添加when scrolled=loadMore,在向下滚动时调用loadMore。无限滚动在div中工作,我需要把它应用到ng下拉多选滚动条上。你的问题是你在div上调用指令,而不是在select上调用指令。您的选择是一个属性而不是一个元素。您知道如何在sleect上调用它吗?我正在使用ng下拉多选,设置如下?是否有类似onselect事件的滚动事件$scope.example14设置={scrollableHeight:'100px',scrollable:true,enableSearch:true};您是否尝试使用ng下拉列表multiselect作为元素而不是我上面建议的属性?我查看了ng下拉列表multiselect的代码,它说它可以是属性或元素。