I've already tried to follow instructions in this question, but I'm stuck, so I had to ask this as a new question.
I am trying to create infinite scroll where a user can see his activities. Only 10 (10 is a hypothetical number here) activities will be shown at a time, so performance will be better.
I created a simple pagination on backend and it works as expected.
/feed/1 -> displays first 10 results (0-10)
/feed/2 -> displays 10 more (10-20)
/feed/3 -> displays 10 more (20-30)
Since I use $http, I couldn't find a way to mimick it, so I put it here as it is for now. There may be more than one issue here, I tried to be careful, though.
Here's my plunk : http://plnkr.co/edit/DLAMy56jwyeqYdN1kvT3?p=preview
Here's my code.
index.html
<!doctype html>
<html lang="en" ng-app="feed">
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ui-view></div>
<!-- Everything is in template.html -->
</body>
</html>
template.html
<div class="virtualRepeatdemoInfiniteScroll">
<md-content layout="column">
<md-virtual-repeat-container id="vertical-container" flex>
<div md-virtual-repeat="FeedFlow in PostController.data" md-on-demand class="repeated-item" flex>
<div ng-repeat="text in FeedFlow.feed">
{{FeedFlow.id}} <!-- whose post is this? -->
{{text.status}} <!-- status -->
</div>
</div>
</md-virtual-repeat-container>
</md-content>
</div>
style.css
.virtualRepeatdemoInfiniteScroll #vertical-container {
height: 292px;
width: 400px;
}
.virtualRepeatdemoInfiniteScroll .repeated-item {
border-bottom: 1px solid #ddd;
box-sizing: border-box;
height: 40px;
padding-top: 10px;
}
.virtualRepeatdemoInfiniteScroll md-content {
margin: 16px;
}
.virtualRepeatdemoInfiniteScroll md-virtual-repeat-container {
border: solid 1px grey;
}
.virtualRepeatdemoInfiniteScroll .md-virtual-repeat-container .md-virtual-repeat-offsetter {
padding-left: 16px;
}
script.js
angular.module('feed', ['ui.router', 'ngMaterial']);
angular.module('feed').run(
['$rootScope', '$state', '$stateParams',
function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]
)
.config(
['$stateProvider', '$urlRouterProvider', '$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$stateProvider
.state('posttest', {
url: '/post1',
templateUrl: 'template.html',
resolve: {
data: 'vm.data',
},
controller: 'PostController'
});
}
]
);
// This is how I normally fetch a feed page. (PostData factory)
// I commented out this part and tried to inregrate it below at PostController section.
/*
angular.module('feed').factory('PostData', ["$http", function($http) {
return $http.get("/feed/1").then(function(response) {
return response.data;
});
}]);
*/
// This is the part I couldn't inregrate it.
// Original link is here : https://material.angularjs.org/latest/demo/virtualRepeat
// I'm trying to implement Infinite Scroll, a demo can be seen below
// http://codepen.io/anon/pen/NxeVwo
angular.module('feed').controller('PostController', ['$scope', '$http', function($scope, $http, $timeout) {
var vm = this;
vm.data = {
numLoaded_: 0,
toLoad_: 0,
items: [],
// Required.
getItemAtIndex: function(index) {
if (index > this.numLoaded_) {
this.fetchMoreItems_(index);
return null;
}
return this.items[index];
},
// Required.
getLength: function() {
return this.numLoaded_ + 1;
},
fetchMoreItems_: function(index) {
if (this.toLoad_ < index) {
this.toLoad_ += 1;
$http.get('/feed/' + this.toLoad).then(angular.bind(this, function(response) {
this.items = this.items.concat(response.data);
this.numLoaded_ = this.toLoad_;
}));
}
}
};
}]);
