Infinite scroll when scrolling upward inside a div

Question

I am building a chat system using AngularJS and Laravel.

I want to have an infinite scroller inside a div container using AngularJS. What I want is a chat box which will show the last 30 chat messages when the user clicks on the username; And when the user scrolls up in the container (not the browser window) then I want to run an AJAX request and fetch the previous 30 records, like we do in the facebook chat application.

Here is my HTML code:

<ul class="chats" ng-repeat="chatData in DataChats">
    <li>
        <div class="message">
            <a> {{chatData.sender_fname }} </a>
            <span class="body"> {{chatData.message }} </span>
        </div>
    </li>
</ul>

and anular js code

$scope.showChat = function(chat_id) {
    $http.get(url+'/chat/'+chat_id).success(function(data){
        $scope.DataChats= data;
    });
}

I have searched the dependency for AngularJS but I only found this for browser like this one Ng infinite scroll. How can I do the container into a Facebook like chat when we scroll up and it shows previous messages?

This is what I want to achieve:

score 2 · Answer 1 · edited May 23 '17 at 12:15

2

Also ngInfiniteScroll supports infinite scrolling for container(ref), but I recommend using ui-scroll. It has more capabilities. This also will answer your question.

You can use ui-scroll-viewport to use ui-scroll for container.

<ANY ui-scroll-viewport>
      ...
</ANY>

This demo with the source code of html & script is all you need to have a simple sample.

The main script of demo is in coffeescript, here is javascript code of the demo:

angular.module('application', ['ui.scroll', 'ui.scroll.jqlite']).factory('datasource', [
  '$log', '$timeout', function (console, $timeout) {
      var get;
      get = function (index, count, success) {
          return $timeout(function () {

              result = [];
              var i = index;
              for (i; i < index + count - 1 ;i++ ) {
                  result.push("item #" + i);
              }
              return success(result);
          }, 100);
      };
      return {
          get: get
      };
  }
]);
angular.bootstrap(document, ["application"]);

As it has mentioned in the documents all you have to do is implementing get function.

here , I provide you a plunker to show an example for getting data from json file.

edited May 23 '17 at 12:15

Community

1
1

answered Dec 25 '15 at 12:49

Asieh Mokarian

1,049
2
13
27

Thanks @A.M i have also seen this post earlier but what i am facing problem here is that ui-scroll and ngInfiniteScroll does not have easy documentation and a example which i can follow and understand can you please give guide me on this ui-scroll please as how i can implement this in my code and i am confused by looking at this because it has so many demos so i dont know which i should use and how they work as they are only demos no documentation kindly please help me – user5184398 Dec 25 '15 at 12:56
@user5184398 I changed my answer to offer a link to a simple sample of using ui-sroll. – Asieh Mokarian Dec 25 '15 at 13:16
where is the javascript code of the demo earlier i could not find the java script code to of it and i am confused about the coffeescript which is being used here – user5184398 Dec 25 '15 at 13:24
I add to my answer also a link to demo script file. As you can see in script links of html file it has used coffee script files. You can change them to javascript. You also need the main script file of ui-scroll which are : `ui-scroll.coffee` and `ui-scroll-jqlite.coffee`. – Asieh Mokarian Dec 25 '15 at 13:32
can you please guide me what coffescript and where i can get it's file and i still can not find java script code of the file – user5184398 Dec 25 '15 at 13:37
but i am getting records from mysql is the coffe script files are just ui-scroll or for getting json data form database – user5184398 Dec 25 '15 at 13:42
1

[here](https://github.com/angular-ui/ui-scroll/tree/master/dist) you can find the main files of ui-scroll in javascript. You need to have `ui-scroll-jqlite.min.js` and `ui-scroll.min.js` beside your files. I will offer you the javascript of demo in answer. So you do not need coffee any more. – Asieh Mokarian Dec 25 '15 at 13:44
1

No, if you see [demo](http://rawgit.com/angular-ui/ui-scroll/master/demo/examples/bootstrapWellClass.html), you will find it is using a test data which is generating in script file of demo, If you want to get data from Json file you need to use $http.get() for example instead of for loop. You have to get your data from json and put it in result. – Asieh Mokarian Dec 25 '15 at 13:59
@user5184398,In my answer, I provide you a plunker to show you an example use of ui-scroll with getting data from json file, all in javascript and angularjs. Pay attention to is loading. – Asieh Mokarian Dec 25 '15 at 14:29
2

@user5184398, If you find the answer useful, you can up vote and accept it by click on the up arrow and check mark near the answer :) – Asieh Mokarian Dec 25 '15 at 14:51
Thanks @A.M let me try it please – user5184398 Dec 25 '15 at 14:51
can you please tell me what is the factory in angualr js... ? – user5184398 Dec 25 '15 at 19:10
Used to define custom service, more information [here](https://docs.angularjs.org/guide/services) – Asieh Mokarian Dec 26 '15 at 08:41

Infinite scroll when scrolling upward inside a div

1 Answers1