dynamically destroying elements as they become invisible and recreating them if they become visible again
@tommck Where is your data comming from? If it is some remote source, then the server side is responsible for indexes handling and the front end should not care about this. If you are using ui-scroll datasource.get as a data generator, then negative indexes handling is a part of your datasource logic. Anyway this logic should be implemented somewhere out of ui-scroll directive cause ui-scroll directive is not responsible for data generation and there is no option to tell the ui-scroll that the data will have no negative indexes at all. There may be a lot of ways how to implement it, e.g. https://github.com/angular-ui/ui-scroll/blob/master/demo/chat/chat.js.
Regarding error handling... Still the ui-scroll directive is not responsible for the data generation and the ui-scroll datasource.get is the only place for data retrieving, then I guess datasource.get should be used also for errors handling. And again, there's total freedom: in the example I just mentioned it may looked like Server.request(start, end).then(success).catch(errorHandler). So this falls to the ui-scroll user too.
@pavanthakur You don't need any special examples because the ui-scroll was initially designed for the purpose of remote data fetching, just do it in a way
datasource = {
get: function (index, count, success) {
Server.request(index, count).then(function (result) {
success(result.items);
});
}
};or to be more detailed in terms of javascript-fetch through the GET
datasource = {
get: function (index, count, success) {
fetch('/api/getData?from=' + index + '&to=' + (index + count)).then(function (result) {
success(result.items);
});
}
};Thank you for reply actually myserver side records have no sequential index and I am trying to bring records according to pagination as below, problem I am facing for the second page of records. Like last 25 record (226 to 250) I am able to load properly with above logic, but next (221 to 225) I am unable to apply logic. I am scrolling last records to first record with scrolling up logic. Basically trying to apply prepend logic.
Sample example as below,
var query = ctx.People.Where(p => p.Name.StartsWith("A"));
var page = query.OrderBy(p => p.Name)
.Select(p => new PersonResult { Name = p.Name })
.Skip(skipRows).Take(pageSize)
.GroupBy(p => new { Total = query.Count() })
.FirstOrDefault();
For eg. https://rawgit.com/angular-ui/ui-scroll/master/demo/chat/chat.html
After adding 1-99 records and scrolling up items will be prepended with below logic
datasource.get = function (index, count, success) {
console.log('index = ' + index + '; count = ' + count);
var start = index;
var end = Math.min(index + count - 1, Server.first);
Server.request(start, end).then(success);
};I want to trigger next set of records for example 100-199 with server.request, assuming it is requesting server for next page set of records.
@dhilt or anyone else here could please help? Thank you.
@pavanthakur In the chat example the Server factory is just a back-end mock, so to make this sample work in real environment you would do following:
1) setup common datasource on the front end with start/end GET request to the remote
datasource.get = function (index, count, success) {
var end = Math.min(index + count - 1, 0);
fetch('/api/getData?start=' + index + '&end=' + end).then(function (result) {
success(result.items);
});
};2) implement data fetching on the backend based on start/end and reversive logic according to this js code
var result = [];
if (start <= end) {
for (var i = start; i <= end; i++) {
var index = (-1) * i;
var item = data[index];
if (item) {
result.push(item);
}
}
}
return result;In that case appending/prepending process is fully server side responsibility. A new item has to be added? add it to the data array on the backend, then the front end will retrieve it automatically via datasource.get when a user will scroll to the border of the viewport.
