Tips on how to navigate to the end of a div that has been created through ng-repeat in Angular JS with the

Here is the template code I am working with:

<div class="chatbox" id="mailBody" >
    <div class="panel-body" ng-repeat="mail in mails">

      <div class="m-b-none" ng-if="mail.inboxMessageType == 1">
        <a href class="pull-left thumb-sm avatar" ng-if="senderLength>=10"><img src="img/a2.jpg" alt="..."></a>
        <a href class="pull-left thumb-sm avatar" ng-if="senderLength<10"><img src="img/business2.png" alt="..."></a>
        <div class="m-l-xxl">
          <div class="pos-rlt wrapper b b-light r r-2x">
            <span class="arrow left pull-up"></span>
            <p class="m-b-none mailbody">{{mail.body}}</p>
            <p><span class="label bg-info dk m-l-sm taglist" ng-repeat="tag in mail.taglist" ng-if="mail.taglist">{{tag.name}}</span></p>
          </div>
          <small class="text-muted"><i class="fa fa-ok text-success"></i>{{ mail.date}}</small>
        </div>
      </div>
</div>

I have implemented a jQuery function to scroll to the bottom of the chatbox when it loads. However, it seems to stop in the middle. Here is the code snippet:

$('#mailBody').stop().animate({scrollTop: $("#mailBody")[0].scrollHeight}, 2000);

I am looking for a solution to make the scrolling go all the way down. Is there an event that I can use on full load of the div or any other method?

Below is the CSS for the chatbox:

.chatbox {
 height: 327px;
 width: 100%;
 overflow: scroll;
 overflow-x:hidden;
 overflow-y:auto;
}

If anyone has a guide on how to achieve this, I would greatly appreciate it. Thanks in advance.

javascriptjqueryhtmlcssangularjs

Answer №1

For the directive, remember to insert your postal code using the post link method.

Answer №2

I successfully implemented this functionality using an Angular Directive.

   angular.module('app')
  .directive('myScrollDirective', function() {
   return function(scope, $element, attrs) {

   if (scope.$last){
  //window.alert("im the last!");
   window.setInterval(function() {
      var elem = document.getElementById('smsBody');
      elem.scrollTop = elem.scrollHeight;
     foo();
    }, 1000);
  var foo = function () {
        clearInterval(myInterval);
    };
}
};
 });

To apply this directive on the page, I simply added the following code:

div class="panel-body" ng-repeat="mail in mails" my-scroll-directive>

With that, the feature was successfully integrated. Many thanks to the helpful members of the Stackoverflow Community!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most effective method for grouping state updates from asynchronous calls in React for efficiency?

After reading this informative post, I learned that React does not automatically batch state updates when dealing with non-react events like setTimeout and Promise calls. Unlike react-based events such as onClick events, which are batched by react to reduc ...

javascriptreactjsasynchronoussetstate

How to retrieve a value from PHP using Ajax?

I am struggling to implement ajax for adding a div to display an error message. Despite my efforts, I keep receiving null as the error message instead of the expected value. The occurrence of null is traced back to <?php echo json_encode($_SESSION[&ap ...

javascriptphpjqueryajax

Creating an Angular service that checks if data is available in local storage before calling an API method can be achieved by implementing a

I am currently working on developing an Angular service that can seamlessly switch between making actual API calls and utilizing local storage within a single method invocation. component.ts this.userService.getAllUsers().subscribe(data => { conso ...

javascriptangulartypescriptrxjs

Fix the order of the list items with HTML Agility Pack

I've been experimenting with the HTML Agility Pack to convert HTML into valid XHTML for inclusion in a larger XML document. While it mostly works, I've run into an issue with how lists are formatted: <ul> <li>item1 <li> ...

c#.nethtmlhtml-agility-pack

How to customize the active color of the navigation pills in Bootstrap 4

I want to customize the background color of each pill, but I also want a faded version of that custom color with an active color matching the full color of the corresponding pill. pill one > faded red pill two > faded blue pill three > faded bla ...

cssbootstrap-4

What is the most effective way to open a jQuery dialog using Angular?

Check out this HTML snippet: <div ng-controller="MyCtrl"> <a ng-click="open()">Click to Open Dialog</a> <div id="modal-to-open" title="My Title" ui-jq="dialog" ui-options="{width: 350, autoOpen: false, modal: true}"> ...

jquery-uijquery-ui-dialogangularjs

Transforming Excel data into JSON format using ReactJS

Currently, I am in the process of converting an imported Excel file to JSON within ReactJS. While attempting to achieve this task, I have encountered some challenges using the npm XLSX package to convert the Excel data into the required JSON format. Any as ...

javascriptreactjsjsontypescriptxlsx

Show the information received from ajax on the webpage

I am facing an issue with displaying the value I receive from AJAX data in this modal. I have set the id="view_name" on a span element but for some reason, it's not showing up. Below is the code snippet that triggers the fun_view function: <td> ...

jqueryajaxlaravelbootstrap-modal

Success with AJAX, but Laravel is failing to insert data into the database

I am encountering a significant challenge with my upvote/downvote system. Despite the success of the AJAX execution, Laravel does not insert anything into the database. I am clueless about what could be going wrong. Here is my AJAX code: $('[data-val ...

phpjqueryajaxlaravel

Checking localStorage before sending a request with ngResource

Is there a way to check localStorage before ngResource sends a request? I want my resource object to first look in local storage before making a call to the server. Ideally, I'd like to save the initial response from the server in local storage so tha ...

angularjsngresource

Choosing a populated control using JavaScript results in an empty value

Within my ASP.NET applications, I incorporate a server-side HTML select control. <select id="CompanyDropDown" runat="server" style="width:330px"> </select> To populate and pre-select items in this control, I use a JavaScript function triggere ...

javascriptasp.netselectpostback

Utilize multiple classes in inline styling within HTML

I'm trying to dynamically apply the "more" CSS class directly to an inline style tag, but I haven't had success with my current approach. Unfortunately, in my situation, I can't create a class. The method is working for <p> tags but no ...

javascriptjqueryhtmlcss

What is the best way to incorporate npm packages and ES6 features into Django?

As I work on the frontend development of my Django application, I am keen on incorporating the official material design components. Yet, I am faced with a challenge in seamlessly integrating these components. I am looking for a way to import the npm packa ...

javascriptpythondjangonpm

Error 405 occurring due to Jersey and AngularJs conflict

Looking to streamline the process of displaying a straightforward String message in the UI using Jersey. Web.xml Configuration <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org ...

javaangularjsrestjerseyjersey-1.0

Populate select2 with the selected value from select1 without the need to refresh the page or click a button

Being a novice in PHP and Javascript, I am looking for a way to populate the "info" select dropdown based on the selected value from the "peoplesnames" dropdown without refreshing the page or using a button. Here's my code: HTML: <select id="peo ...

javascriptphpjqueryhtmlmysql

Tips for choosing multiple checkboxes with the input type of "checkbox"

image of my columns and checkboxes <table class="table table-striped grid-table"> <tr> <th>Id</th> <th>Code</th> <th> <input type="checkbox" id="box&q ...

javascriptc#model-view-controller

Transfer all the child nodes to the parent using the spread operator or Object.assign while preventing duplicate properties from being overwritten

I'm trying to transfer all the nodes of a child node to the parent using the spread operator or Object.assign (without relying on Lodash) while avoiding overwriting existing properties. My initial thought was to simply append the childArray to the ro ...

javascripttypescript

Display additional tiles within a compact container

I'm attempting to replicate the user interface used by foursquare! Positioning the map slightly off center like they have . I've figured out how to do one part but struggling with the second part. Initially, I loaded the map in a small div (t ...

javascriptcssleaflet

What are some effective ways to utilize Jquery? Is it possible to integrate multiple libraries and plugins on a single webpage?

With the abundance of Jquery plugins and libraries available, there may be instances where using multiple on the same webpage becomes necessary. The challenge then arises of maintaining optimal speed and performance. What strategies should one employ to e ...

jqueryperformanceplugins

What methods can I use to achieve a stylish and responsive design for my images?

I have been encountering difficulties styling the images for my website. Despite multiple attempts, I am unable to apply CSS properties such as border-radius and responsive design to the images on my page. The images load fine, but they do not seem to acce ...

htmlcssimageresponsive