角度加載數據OnScroll

只需要一些幫助，我堅持，並沒有一個想法如何在Angular中實現這個附加。我想在用戶滾動和滾動條觸及底部時附加一個新數據。這是我的代碼。角度加載數據OnScroll

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"); 
    }); 
}

//編輯我想是這樣的。但它只是覆蓋了數據

來源

2014-10-01 Snippet

你可以這樣做：

$scope.onScroll = function() 
{ 
    DataModel.getNextData().then(function(results){ 
     $scope.list_of_data.push(results); 
    }); 

}

假設你有一個特定的API函數來獲取下一個結果。

來源

2014-10-01 08:54:57 benek

哦。感謝這個想法。所以，因爲即時通訊在list_of_data中添加新數據，ng-repeat會加起來嗎？比如第一個是20，下一個結果是20，然後按下，這樣它會是40.在40個數據中再次執行ng-repeat循環？ – Snippet 2014-10-01 09:14:32

ng-repeat在綁定的幫助下被重新刷新。每次更新JS列表時，都會運行角度摘要循環，並在更新的數據上重新運行ng-repeat。這是角度很酷的東西:) – benek 2014-10-01 09:16:30

會造成性能問題？ – Snippet 2014-10-01 09:21:50

角度加載數據OnScroll

回答

相關問題