[英]Angular Load data OnScroll
我只需要一些幫助,我就停滯了,不知道如何在Angular中實現此追加。 我想在用戶滾動且滾動條觸底時添加新數據。 這是我的代碼。
note備注DataModel.getAllData使用分頁參數訪問api。
我堅持在onScroll期間如何添加新元素。 這是我想在滾動上要實現的目的,我想使用list_of_data.html。 將所有新數據放入list_of_data。 得到最終輸出,然后將其附加到data_list上。
指示
app.directive('scroll', function() {
console.log('scroll directive');
return function(scope, elm, attr) {
var raw = elm[0];
elm.bind('scroll', function() {
if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight - 20) {
scope.$apply(attr.scroll);
}
});
};
});
main.html中
<div class="container" scroll="onScroll()">
<div id="data_list" data-ng-init="getData()" >
<div ng-include src="data_uri"></div>
</div>
</div>
list_of_data.html
<div ng-repeat="mydata in list_of_data">
<div>mydata.name</div>
<div>mydata.description</div>
</div>
調節器
var next;
$scope.onScroll = function()
{
if(next != null || next != "undefined"){
DataModel.getAllData(user_info,next)
.then(function (data) {
$scope.list_of_data = data;
next = data.next;
}, function (error) {
console.log("error");
});
}
}
$scope.getData = function(){
$scope.data_uri= 'views/list/list_of_data.html';
DataModel.getAllData(user_info)
.then(function (data) {
$scope.list_of_data = data;
next = data.next;
}, function (error) {
console.log("error");
});
}
//編輯我嘗試過這樣的事情。 但它只是覆蓋數據
您可以執行以下操作:
$scope.onScroll = function()
{
DataModel.getNextData().then(function(results){
$scope.list_of_data.push(results);
});
}
假設您具有特定的API函數以獲取下一個結果。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.