CODEWITHSUNDEEP
javascriptjqueryangularjslaravelinfinite-scroll
Muhammad Usama Mashkoor
Muhammad Usama Mashkoor

Reputation: 847

Infinite scroll when scrolling upward inside a div

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:

goal

Upvotes: 4

Views: 1625

Answers (1)

Asieh Mokarian
Asieh Mokarian

Reputation: 1129

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.

Upvotes: 2

Related Questions