Angularjs example for load on demand / lazy loading ,facebook like pagination with angularjs.
article from : http://plnkr.co/edit/9WpuUJ?p=info
1. Html
<!DOCTYPE html>
<html ng-app="appModule">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.3.0/angular.js"></script>
<script src="Scripts/Controllers/app.js"></script>
<script src="Scripts/Controllers/Scroll.js"></script>
<style>
/* Styles go here */
.glyphicon-refresh-animate {
-animation: spin .7s infinite linear;
-webkit-animation: spin2 .7s infinite linear;
}
@-webkit-keyframes spin2 {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
from {
transform: scale(1) rotate(0deg);
}
to {
transform: scale(1) rotate(360deg);
}
}
</style>
</head>
<body ng-controller="appController">
<div style="margin: auto;width:50%">
<list-infinitescroll datasource="datasource"
list-title="{{'Infinite Scroll Demo'}}"
do-load-more="doLoadMore">
<div>
<img ng-src="http://placehold.it/{{divWidth}}x100&text={{item.name + item.id}}">
</div>
</list-infinitescroll>
</div>
</body>
</html>
2.scroll.js
(function () {
angular.module('infinitescrollModule', [])
.directive('listInfinitescroll', function () {
return {
restrict: 'E',
scope: {
listTitle: '@',
datasource: '=',
doLoadMore: '=',
},
transclude: 'true',
templateUrl: 'Listview.html',
link: function (scope, element, attrs) {
scope.divWidth = document.getElementById('myDiv').offsetWidth - 60
scope.loadMore = function () {
if (scope.doLoadMore) scope.doLoadMore()
}
}
}
})
.directive('inject', function () {
return {
restrict: 'A',
link: function (scope, element, attrs, ctrl, transcludeFn) {
if (!transcludeFn) return;
transcludeFn(scope, function (clone) {
element.empty();
element.append(clone);
});
}
}
})
.directive('whenScrollBottom', function () {
return function (scope, elem, attr) {
var scrollBar = elem[0]
elem.bind('scroll', function () {
if (scrollBar.scrollTop + scrollBar.offsetHeight >= scrollBar.scrollHeight) {
scope.$apply(attr.whenScrollBottom);
}
})
}
})
})()
3.app.js
(function () {
angular.module('appModule', ['infinitescrollModule'])
.controller('appController', function ($scope) {
$scope.oneceToShow = 20
$scope.datasource = []
$scope.init = function () {
$scope.sourcePush(0, $scope.oneceToShow)
}
$scope.doLoadMore = function () {
var start = $scope.datasource.length
var end = start + $scope.oneceToShow
$scope.sourcePush(start, end)
}
$scope.sourcePush = function (start, end) {
for (var i = start; i < end; i++) {
$scope.datasource.push({
name: 'a',
id: i
})
}
}
$scope.init()
})
})()
4. Listview.html (repeated html content)
<div class="panel panel-success">
<div class="panel-heading"><h3>{{listTitle}}</h3> <div class="list-group-item" align="center" ng-show="isBusy"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>Loading...</div></div>
<div id="myDiv" style="overflow: auto;max-height: 600px" when-scroll-bottom="loadMore()">
<li class="list-group-item" ng-repeat="item in datasource">
<div ng-transclude inject></div>
</li>
</div>
</div>
No comments:
Post a Comment