Whenever an item is clicked, the ng-repeat directive will be refreshed

This code block shows an example of HTML:

    <div class="main" ng-controller="companies">
        <ul style="list-style: none;">
            <li ng-repeat="company in companies | orderBy:'name' | filter:companies_filter">
                <a href="#!/companies/{{company.id}}" ng-click="companySelected(company)">
                    {{company.name}}
                </a>
            </li>
        </ul>
    </div>

The following excerpt is from the router.js file:

...
        .when('/companies', {
            templateUrl: '../html/companies.html',
            controller: 'companies'
        })
        .when('/companies/:companyId', {
            templateUrl: '../html/companies.html'
        });
....

This JavaScript snippet demonstrates a working function:

$scope.companySelected = function(company) {
    console.log(company);
}

An issue arises when scrolling through a large list: clicking on a company or applying a filter causes the list to jump back to the top. How can this behavior be fixed so that the list remains in its current position?

Answer №1

If you need help with scrolling to a specific point, consider using $anchorScroll.

Check out the detailed information provided in this documentation: anchorScroll

When navigating back from a company page to the list, it may be necessary to add the hash ID of the previously clicked element. To do this, make sure to assign an ID to the li element as shown below.

<li id={{company.id}} ng-repeat="company in companies | orderBy:'name' | filter:companies_filter">
                <a href="#!/companies/{{company.id}}" ng-click="companySelected(company)">
                    {{company.name}}
                </a>
</li>

Upon returning to the list page, invoke $anchorScroll();. You have the option to pass the hash as a parameter in the anchorscroll or update the location hash beforehand like so:

$location.hash('id_value');

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

How to retrieve a specific value using jQuery based on the name attribute

I'm having an issue retrieving the selected value from the menu and assigning it to the `country` variable. Whenever I try, I keep encountering the error: No parameterless constructor defined. The `UpdateClient` function is triggered by clicking on t ...

Finding curly brackets and commas using regular expressions

Imagine a lengthy JSON string. I am aiming to identify the following section using a regular expression: }, { "@context" My current expression is yielding two results instead of one. The only variance lies in the braces with the comma preced ...

Simple guide to decoding JSON in React Native

Currently, I am working on a react native project where I am calling an API to extract data. The extraction process is successful, but now I am facing an issue with taking arguments from the extracted data. Axios({ url: '/Authentification', ...

Adjust date by one day using the Datetimepicker tool

I have been attempting to adjust the date of my input by one day either forward or backwards, but I seem to be stuck and not making any progress. Take a look at my code: function function backDay() { var date = $('input#datetimepicker').va ...

Struggling to achieve desired output from function in NextJS

I'm a bit confused by the code below. The itmLoop function seems to work fine when placed directly in the return section, but nothing is output when it's called as shown below? I'll eventually need to make it recursive, so I have to keep i ...

An effective method for creating responsive layouts for custom-shaped HTML elements in a board game

Can anyone guide me on aligning spaces responsively on a board in HTML using Angular 1.x? I've tried using vw/vh's and %s, but consistency breaks on different view sizes. Any straightforward suggestions to address this issue? Avoiding multiple c ...

What could be causing Loudev jQuery multiselect to generate duplicates?

The concept involves allowing users to select a main bank branch via a search textbox that triggers a jQuery AJAX request. If the user wishes to add more branches, they can use a multiselect functionality provided later in the form for selecting one or mul ...

Is there a way to pass a complete image element as a prop in React?

I am receiving a JSON response with an image property for each key. This image property contains the entire image element tag with properties. I am trying to pass this down to a child component, but when I attempt to render it, it only displays as plain ...

Can an inferred object type be imported in Flow?

Within a single file, I have the ability to include the following object: type NewType = { dateCreated: Date } export const myModel: NewType = { dateCreated: new Date() } I am particularly intrigued by the prospect of importing NewType alongside the impo ...

Enhancing the appearance of hyperlinks within a UIWebView

Currently, I am using a UIWebView to display content that includes clickable links. The UIWebView automatically highlights and underlines these links, but I'm wondering if there is a way to customize their styling. Specifically, I'd like to chang ...

Sequelize throws an error stating 'Model is not defined' when trying to establish a relationship across multiple databases

I am in the process of creating a separate sequelize instance for each database. In some cases, tables in DB1 have relationships with tables in DB2, and vice versa. One such relationship is DB1.Utilisateur.contenuProvenance_id => DB2.Contenu.id and DB2. ...

Error Encountered with Google Chart in Internet Explorer 8 - CODE70: Access denied format+en,default+en,ui+en,corechart+en.I.js, at line 86, position

Encountering a persistent error when using Google Charts in IE8: SCRIPT70: Permission denied format+en,default+en,ui+en,corechart+en.I.js, line 86 character 16 The issue arises while working with a parent page where the drawChart() function and global ...

What is preventing the input box from shrinking further?

I created a search box using CSS grid that is supposed to shrink when the page is resized. However, it doesn't seem to shrink as much as I expected it to. Here is how it appears when fully extended: https://i.stack.imgur.com/tPuCg.png And here is how ...

There seems to be an issue in react.js where the baseURL in Axios is not being properly concatenated

Currently, I have integrated axios setup with saga.js to handle user registration. When the user clicks the Register button, an action is dispatched and a request is sent. Everything seems to be working smoothly, except for the issue of appending the baseU ...

Send a personalized message to the error-catching block via throwing an error

I am trying to create a method for generating custom error messages that can be read within my catch block. My goal is to have the errorMessage variable in the catch block contain the message that is thrown by the throw Error function, allowing me to displ ...

How can I retrieve the total number of records (count) in an XML response using PostMan?

Hello, I'm currently attempting to determine the length of an XML response but I'm running into some issues. The error message I am encountering is as follows: "There was an error in evaluating the test script: ReferenceError: xml2json is not def ...

"Underscores in an array of primary keys serve as markers for

I want to filter a list of objects using underscore based on their primary key being included in a specific array of primary keys. list = [object{pk: 1}, object{pk: 2}, object{pk: 3}] primary_key_list = [1,2] The desired outcome is to return [object{pk: ...

Optimal approach for choosing/emphasizing text (within a text input field) in Vue (utilizing computed properties for input value and selection range)

Our current setup involves a text input field with its value stored in Vuex, passed as props, and accessed through computed properties. Within the same Vuex store, we also have a selection range (an array of two numbers) that allows text in the input to be ...

Preventing setTimeout from repeating upon reload in Angular

I have a dataset and processing code shown below: LIST = [{ "id": "1lqgDs6cZdWBL", "timeUpdated": "2020-04-22 12:51:23", "status": "CLOSED" }, { "id": "C2Zl9JWfZHSJ& ...

Having difficulty finding the element in Selenium WebDriver while using C#

Can anyone help me locate the element in the following HTML tag? I keep getting an exception: no such element: Unable to locate element: {"method":"xpath","selector":"//*[@id='divMain']/div/app-train-list/div ...