我使用 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);
};
下面是为不在 mutlselect 下拉列表中的外部 div 工作的无限滚动代码,而且在搜索后它不会对下一个数据集进行无限滚动。
代码:
<div id="fixed" ng-dropdown-multiselect="" options="user"
selected-model="userModel"
extra-settings="example14settings" when-scrolled="loadMore()"></div>
#fixed {
height: 400px;
overflow : auto;
}
$scope.example14settings = {
enableSearch: true
};
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(attr.whenScrolled);
}
});
};
});
如何在 Angular 多选下拉列表的滚动内添加无限滚动? 另外,当用户搜索某些内容时,向下滚动时无限滚动应该对搜索数据起作用?
最佳答案
从您在这里发布的内容中,我可以看到您没有应用“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-dropdown-multiselect”,如下所示:
<ng-dropdown-multiselect when-scrolled="loadMore()"></ng-dropdown-multiselect>"
您需要绑定(bind)到元素而不是属性。
关于java - angularJS ng-dropdown-multiselect 实现无限滚动的滚动事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42838251/