CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
WJA
WJA

Reputation: 7004

How to scroll down to latest entry in ng-repeat (AngularJS or Javascript)

I have a div with ng-repeat to display posts and an input box to enter new posts. They are sorted such that the latest post is shown at the bottom. Upon adding a new post, I would like to scroll down to see the latest. Is there an angular trick to do this efficiently? Or do I need to use javascript to achieve the desired result?

<div ng-repeat="post in posts | limitTo:-15">
    {{post.uid}} : {{post.text}}
</div>

<form>
  <input type="textarea" class="chatbox" placeholder="Start typing..." ng-model="newPost"/>
  <button class="chatbutton" type="submit" ng-click="addPost(newPost); newPost = null; setInterval();"><span class="glyphicon glyphicon-send"></span></button>
</form>

Upvotes: 2

Views: 6029

Answers (3)

WJA
WJA

Reputation: 7004

So I found the solution through correct use of anchorScroll (reference by PSL). Here is the code:

<div id="scrollArea" ng-controller="ScrollController">

  <div style="padding: 10px" ng-repeat="post in posts | limitTo:-10">
    <span class="chatbox" style="background: {{post.pcolor}}">{{post.text}}</span>&nbsp;&nbsp;<span class="chatname">{{post.pname}} ({{post.time}})</span>
  </div>

<form>
  <input  class="chatinput" placeholder="Start typing..." ng-model="newPost"/>
  <button class="chatbutton" type="submit" ng-click="gotoBottom(); addPost(newPost); newPost = null;"><span class="glyphicon glyphicon-send"></span></button>
</form>
<a id="bottom"></a>
</div>

Please make sure to but the id="bottom" within the div of the ScrollController:

.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
  function ($scope, $location, $anchorScroll) {
    $scope.gotoBottom = function() {
      // set the location.hash to the id of
      // the element you wish to scroll to.
      $location.hash('bottom');

      // call $anchorScroll()
      $anchorScroll();
    };
  }])

Upvotes: 0

ppoliani
ppoliani

Reputation: 4906

You could make this generic by adding a decorating directive.

here is an example that can probably help you to this;

Basically, when a new item is added then the $anchorScroll service will be used to scroll to that specific element.

http://jsbin.com/binoqavopa/18/edit

Upvotes: 2

pears456
pears456

Reputation: 13

If I understand what your asking, you can sure use JavaScript for this function. I would suggest depending on your code and what you have happens when a user clicks submit, you can catch the submit process what you need done and then scroll down to the latest post. Not sure how you handle the submit function so it would be hard to show you. But maybe something like this :

Basically you could have all your code for handling the submit and then when the user does click it you scroll to the bottom using something like this:

 $("#submit").on("click" ,function(){
            scrolled=scrolled + 2700;
            /* other functions here */
            $(".stuff").animate({
                    scrollTop:  scrolled
               });

 });

Upvotes: 0

Related Questions