角度加载数据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

回答

相关问题