Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
pavanthakur
@pavanthakur
ok thanks @dhilt for repl, I am searching for options. Thank you for the wonderful library, its great help.
pavanthakur
@pavanthakur
Basically I tried perfectscrollbar, slimscroll, nanoscroll, etc but my current functionality is not yet working as expected, hence thought to get head start from here. Thank you.
Tom McKearney
@tommck
what would cause the ui-router 0.4.2 to create a Controller for a page twice during a single navigation?
Tom McKearney
@tommck
oh.. just realized I have to "ui-view" divs nested.. I think that's causing it
Tom McKearney
@tommck
ugh.. no matter what I do, it's calling the Controller twice :(
Tom McKearney
@tommck
Nobody knows why a Controller would be called twice when OnEnter is only called once?
Denis Alexanov
@dhilt
@tommck I suggest you to write at https://gitter.im/angular-ui/ui-router
Tom McKearney
@tommck
oh jesus! lol
thought I was in there.. no wonder nobody responded!
thanks @dhilt
Denis Alexanov
@dhilt
:smile: :+1:
pavanthakur
@pavanthakur
@dhilt I want to fetch data from rest api c#, do you have any working reference example. I tried to look at examples given by you on website, but I am looking at similar example https://sroze.github.io/ngInfiniteScroll/demo_async.html
Denis Alexanov
@dhilt

@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);
        });
    }
};
pavanthakur
@pavanthakur

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();

pavanthakur
@pavanthakur
I am facing problem like how shall I trigger the next set of records and prepend the items to the previous set of records. I am working on chat application, so I am loading previous history on demand, but at same time getting new messages from other users.
Denis Alexanov
@dhilt
@pavanthakur So you need a reverse logic of items retrieving/displaying. We have a demo that could be helpful: https://rawgit.com/angular-ui/ui-scroll/master/demo/chat/chat.html. If you have an access to the backend code, you would be able to solve the issue on the server side. In other case you may look at angular-ui/ui-scroll#58, but I vote for backend changes.
pavanthakur
@pavanthakur
Thank you for the headsup, will go over it.
pavanthakur
@pavanthakur
I have looked at both the links, actually I am able to get records and implemented paging similar to mentioned in #58. However my problem is the new items are getting appended insted of prepended, when I scroll down and come up, then items are loaded in sequence properly. I am not able to resolve the issue of items being prepend for new page.
pavanthakur
@pavanthakur
I feel it is index issue where for old page (set of record) works properly, but I am not able to figure out implementation for new page, how to utilize index and continue datasource.get and prepend data on upword scrolling.
pavanthakur
@pavanthakur

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.

Denis Alexanov
@dhilt

@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.

pavanthakur
@pavanthakur
Thanks @dhilt for the sample I am not able to get solution, working on it. FYI, server side data is appended but the datasource.get is not working on second iteration.
szakmaster
@szakmaster
Hi, I am wondering that is it possible to use two ui-scroll directives within one ui-scroll-viewport? I would like to display two columns within a viewport. Each column would be filled up from different ui-scroll datasources. Thanks.
Denis Alexanov
@dhilt

@szakmaster If you want to join your data sources under a single viewport, then the indices of both datasources must be synchronised. In that case I would suggest following approach. Use single datasource implementation with single indices handing out-of-box, but make two parallel data requests and do a merge after the results are received. Something like:

$scope.datasource = {
  get: (index, count, success) =>
    Promise.all([Server.request1(index, count), Server.requst2(index, count)])
      .then(results => {
        let items = [];
        results[0].forEach((item, index) =>
          items.push({ r1: results[0][index], r2: results[1][index] })
        );
        success(items);
      });
};

At the end you'll get a mixed array of two columns consist of the results of two parallel requests. So, at the template you will be able to do following:

<div class="viewport" ui-scroll-viewport>
  <div class="item" ui-scroll="item in datasource">
    1 row: {{item.r1}}
    2 row: {{item.r2}}
  </div>
</div>
szakmaster
@szakmaster
Thanks @dhilt, it works now. However, I have another question related to using adapters. I want the data in the buffer to be updated as it is in the real data object. For this, I would use apply Updates and reload methods from Adapter. I added adapter="myAdapter" to the template and created a myAdapter object on controller scope. Where i
When I trying to call ctrl.myAdapter.reload(), console says reload is not a function. Should I implement reload on my scope?
szakmaster
@szakmaster
Same with applyUpdates(index, newItems[]). I saw the example codes and there it works without any extra implementation.
Denis Alexanov
@dhilt
@szakmaster I found the question on Stackoverflow, which is related to your last issue. I put my answer there: https://stackoverflow.com/a/47763044/3211932. I guess your problem could be in wrong scope assignment and to exclude it I would recommend to try Controller As syntax (adapter="myCtrl.myAdapter") or define your Adapter on the scope object explicitly: $scope.myAdapter = {}.