After sending a GET request in AngularJS, simply scroll down to the bottom of the

Usually, I use something like this:

$scope.scrollDown = function(){
    $location.hash('bottom');
    $anchorScroll();
}

While this method works fine in most cases, I've encountered an issue when fetching data for an ng-repeat and trying to resize the view once the data is loaded.

For example (in the controller):

users.fetch({userList:$routeParams.conversationId}, function(data){
        $scope.userList = data;
        $scope.scrollDown();
})

The scrollDown function executes too quickly, before the ng-repeat has finished populating the $scope.userList that it relies on to build its table.

I'm looking for a way to trigger scrollDown after the list has been updated or modified. Any suggestions on how to achieve this would be greatly appreciated!

Many thanks!

Answer №1

To trigger the goToBottom function when a variable in AngularJS changes, you can utilize a $watch listener.

$scope.myList = [];

$scope.$watch("myList", function () {
    $scope.$evalAsync(function () {
        $scope.performAction();
    });
}, true);

$scope.performAction = function () {
    $(function () {
        //$scope.goToBottom();
    });
};

Answer №2

You have the option to implement a scrolling function at the bottom of the page once it has fully loaded.

angular.element($window).bind('load', 
    function() {
      var lastMessage = document.getElementById("messages-list").lastElementChild;
      lastMessage.id = "bottom";
      
      $location.hash('bottom');
      $anchorScroll();      
    }
  

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

Here is a way to prevent a null input value from being accepted in a JavaScript function

Hey there, I have a function that looks like this: class Fun { pem_Files_Checker_And_Adder_Server_Id_Adder(id , serverType , hostname) { //do something }; }; } In order for this function to work properly, I need to give it some values. For exam ...

Displaying or concealing an HTML element based on a JavaScript XHR request function

I have a single HTML element that I need to display and hide using jQuery within a pure JavaScript XHR request method. Currently, the element always remains visible without hiding when the request is complete or successful. On error, I would like it to be ...

"Enhance Your Website with Multiple Video Streams using YouTube API Events

Hello everyone! I am looking to include multiple videos on my website and have them start playing automatically when a user scrolls and the videos are in view. I want the speakers to be muted by default using the mute() function. Previously, I had succes ...

Ajax handling all tasks except for adding HTML elements

Having an issue with my basic "Load More on Scroll" AJAX function. The console is showing that the HTML is being sent back from the request, but for some reason, nothing is being rendered on the page. I must be missing something really simple here. $(wi ...

I am unable to retrieve all the selected checkbox values from the pug template in Express

If you are following the Express MDN tutorial here, you might have encountered an issue with pulling in checkbox values from Pug. In the tutorial, req.body.genre is expected to return an array of selected values from a form. The code snippet for this func ...

Attempting to reach <p> from numerous web pages

Currently, I am working on a project where I need to extract text data from various websites. I have successfully managed to retrieve the text data using <p> tags. I would really appreciate any assistance with this task. Thank you! ...

Is it possible to dynamically incorporate directives within an AngularJS application?

I'm attempting to utilize several custom directives within the Ionic framework. The dynamic structure is like <mydir-{{type}}, where {{type}} will be determined by services and scope variables, with possible values such as radio, checkbox, select, ...

Step-by-step guide on replicating a website along with its CSS styles and scripts

I've been exploring the idea of cloning a webpage, such as Instagram's login page, along with its CSS elements and JavaScript, to use locally. Basically, I want to duplicate the login page and host it on my test server in a way that allows it to ...

Utilizing HTML and JavaScript to Download Images from a Web Browser

I'm interested in adding a feature that allows users to save an image (svg) from a webpage onto their local machine, but I'm not sure how to go about doing this. I know it can be done with canvas, but I'm unsure about regular images. Here i ...

Why isn't my state being updated properly with React's useEffect, useState, setInterval, and setTimeout functions?

const handleClick = () => { if (!activated) { if (inputValue == '') { return } if (!isNodeInGraph(graph, inputValue)) { return } } setActiv ...

What is the process for transforming a `json query` into a `sql query`?

I have developed an AngularJS application that generates queries in JSON format, incorporating various tables, fields, and operators such as "join", "inner", "where", "and", "or", "like", and more. The AngularJS app transmits these JSON queries to my Djan ...

steps to attach click event to row of a-table component in ant design vue

Here is the code snippet for the table I am working on. I have imported a-table from antd. To enable click functionality to route to a details page from this listing page, an additional td can be added. <a-table :columns="companiesColumns" :d ...

Using ReactJS to trigger a timer function on a button click

Kindly Note: This is a unique query and not related to ReactJS - Need to click twice to set State and run function. The suggested solution there does not resolve my issue. This represents my original state: constructor(props) { super(props) this. ...

Hosting images with an online service on jsfiddle: A guide

Exploring the world of HTML canvas and honing my skills in HTML and CSS through jsfiddle, I am eager to incorporate my own images. While sites like Google Drive provide free image hosting, I wonder if I can utilize them with drawImage(); Is there a way to ...

Why is the value in my React Redux state not updating as expected?

I recently started learning react js as a beginner. To practice, I created a crud app and integrated firebase for authentication. However, I'm facing an issue where I'm not able to retrieve the updated value. Index.jsx At line 11, I'm stru ...

Changing the background image of the body when hovering over a li element: a step-by-step

For my website, I want to achieve the same effect as seen on the homepage of this site: I am looking to change the background image of my webpage when a specific li element is hovered over. Each li element should trigger a different background image. Add ...

Refresh element once AJAX call is completed successfully

Issue Despite a successful AJAX request, I am encountering difficulties updating an element on the webpage. JavaScript Code $(function() { $(".upvote").click(function() { var id = $(this).parent().find("input").val(); $.ajax( ...

Guide for updating an Angular 1.x directive with "replace: true" configuration

Question Summary: I am currently utilizing a third-party directive that has been configured with replace: true. My goal is to recompile the directive each time a user clicks a button. I have attempted several methods, but have not had any success so far. ...

How can you exclude selected values in React-select?

Here is how I have defined my select component: this.state.list = [{label: "test1", value:1}, {label:"test2", value:2}, {label:"test3", value:3}] this.state.selected = [{label:"test2", value:2}] let listMap = this.state.list let list = this.state.list { ...

Positioning an HTML table with the use of a for loop in JavaScript

Detail of the project: -Utilizing a javascript for loop, my program extracts data from an external javascript array titled "arrays.js" and organizes it into an HTML table. The goal is to align the appropriate data under the "Date Name Address Amount" colum ...