AngularJs - The ngRepeat directive is experiencing significant delays in rendering data

Currently, my application is pulling 100 items per page and implementing a custom pagination solution by making AJAX calls for the next set of items. The data retrieval process takes around 400ms, however, there seems to be a delay in rendering the display. I suspect that the issue may lie with the ng-repeat function. Since I do not have a column containing all unique items, using track by is not an option for me. Although some suggest using limit, it is unnecessary as I am already utilizing server-side pagination. How can I optimize the render time under these circumstances?

javascriptangularjsangularjs-ng-repeat

Answer №1

Dealing with 100 items using ng-repeat shouldn't pose a problem, but it ultimately depends on the overall layout of your page.

ng-repeat generates numerous watches that can lengthen Angular's digest process.

Typically, ng-repeat is utilized to display data rather than creating inputs, so two-way binding isn't necessary (one-way binding will suffice).

For reducing unnecessary watches, consider utilizing the helpful library called bindonce.

Instead of structuring your code like this:

<ul>
    <li ng-repeat="person in Persons">
        <a ng-href="#/people/{{person.id}}"><img ng-src="{{person.imageUrl}}"></a>
        <a ng-href="#/people/{{person.id}}"><span ng-bind="person.name"></span></a>
        <p ng-class="{'cycled':person.generated}" ng-bind-html-unsafe="person.description"></p>
    </li>
</ul>

You should structure it like this instead:

<ul>
    <li bindonce ng-repeat="person in Persons">
        <a bo-href="'#/people/' + person.id"><img bo-src="person.imageUrl"></a>
        <a bo-href="'#/people/' + person.id" bo-text="person.name"></a>
        <p bo-class="{'cycled':person.generated}" bo-html="person.description"></p>
    </li>
</ul>

Answer №2

Are you dealing with a large amount of dynamic data? Check out the link below for some helpful insights.

Managing Angular ng-class performance with a high volume of elements in the DOM

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

Efficiently update numerous users simultaneously within Firebase

I am trying to figure out how to update multiple user objects stored in my Firebase 2.x DB simultaneously. Each object is structured similarly to the following example: { "users": { "$id": { "date_of_birth": "June 23, 1912", "full_name": ...

javascriptangularjsfirebasefirebase-realtime-database

What is the reason behind $http verifying if the response data is in string format?

Angular's $http service defaults to transforming data by checking if it is a string and returning it as is if not. This simplifies unit testing by allowing the use of mock POJOs instead of json strings. Are there any scenarios where this behavior is ...

angularjs

Is express.js capable of serving static assets and RESTful APIs at the same time?

Currently, I am using the serve-static package to serve a basic Angular single page application (SPA), but now I need to add functionality to fetch dynamic data from the server. After doing some research, it seems like replacing the "serve-static" module ...

angularjsnode.jsrestexpress

The feature of Google street view is not supported within the tabs on WordPress

I'm experiencing some issues with displaying Google maps and street view using the Wp Google Map WordPress plugin within tabs. The map displays perfectly on the first tab where I placed the short code for the map, but on the second tab where I placed ...

javascriptcsswordpressgoogle-mapsgoogle-maps-api-3

issue with unknown values in Vuejs array of objects

Struggling to create an array of objects, but encountering an issue where the first 83 objects are returning as undefined while only the last 4 have the correct data. Despite multiple attempts to refactor the code, a solution remains elusive. Here is the ...

javascriptvue.jsapexcharts

I'm curious about utilizing jsviews in conjunction with jquery sortable

Check out my jsFiddle Example where I am using jsViews in conjunction with JQuery sortable. By default, the remove function works fine; however, when you change the order of items and then try to delete one, multiple items are removed. How can this issue ...

javascriptjqueryjquery-uijsrenderjsviews

Different option for key press identification

My JavaScript skills are still at a beginner level and I've come across a bug that's causing me trouble. The issue is with keyCode not working on mobile devices (Chrome). It seems that mobile devices do not support keyCode. I think I could use ...

javascriptkeycode

Testing the number of times module functions are called using Jest

As someone who is relatively new to JavaScript and Jest, I am faced with a particular challenge in my testing. jest.mock('./db' , ()=>{ saveProduct: (product)=>{ //someLogic return }, updateProduct: (product)=>{ ...

javascripttypescriptjestjs

Discover the secrets of accessing two distinct objects returned by a single REST URL with Backbone

I am working with a REST URL that looks like this: /users/<user_id>/entities This URL returns data containing 2 objects as follows: { "players": { "test_player2": { "_id": "test_player2", "user": "f07590 ...

javascriptajaxbackbone.js

Exploring the Methods to Filter JSON Data in Node.js

There have been significant changes in technologies over the past couple of years since I last checked answers to this question. Currently, I am dealing with JSON files that are being transmitted from a database to my server. My main concern is how to eff ...

javascriptjsonnode.js

React component showcasing live data based on the URL's input

I'm looking to develop a dynamic component that can retrieve and display data from a JSON file based on the URL path, rather than creating separate pages for each dataset. For instance: https://jsonplaceholder.typicode.com/posts If the page route is ...

javascriptjsonreactjs

Sorting an array of strings in JavaScript with the help of another array of strings

I am looking for a way to rearrange array1 based on array2. var array1 = ["cat","dog","mouse","elephant","ant","cow","goat","hen"]; var array2 = ["mouse","cow","goat"]; Expected output: var another_array = ["mouse","cow","goat", "bird"--- then rest of ...

javascriptarrayssorting

Tips for Successfully Sending Vue Data in Axios POST Call

I'm struggling to pass Vue data to an axios.post request. Using the Vue template doesn't seem to work. How can I successfully pass the Data? Here is my Code: <body> <div id="app" class="container"> <div> ...

javascriptvue.jsaxios

Combining Data in Django using Ajax with JavaScript and Python Integration

I am in need of assistance understanding a basic ajax call from JavaScript to Python. I have a Python function that takes a simple parameter and returns a result. My goal is to send this parameter from JavaScript, receive the function result back in JavaSc ...

javascriptjquerypythonajaxdjango

Performing a AJAX POST call to the latest Google Analytics V4 API

Recently, the Google Analytics v4 API was updated and now requires POST requests instead of GET requests. Unfortunately, there are not many examples available yet... I managed to obtain the accessToken, but when I attempt the following POST request, I alw ...

javascriptjqueryajaxpostgoogle-analytics-api

Creating a Chrome extension with Angular 5: A comprehensive guide

Currently, I am in the process of developing a Chrome extension using Angular 5. Initially, I successfully created a basic Angular app with the help of Angular Material and it functioned perfectly as an Angular application (I used ng build for verification ...

javascriptangulargoogle-chrome-extension

Controlling various divs with unique identifiers using Angular

Imagine having a vast number of HTML elements with unique IDs that require their styles to be changed repeatedly in a controller for spectrum visualization. What is the most efficient way to achieve this in Angular, without resorting to duplicative HTML co ...

javascripthtmlcssangularjs

Struggling to receive information from a third-party API using a token in a React application

Currently, I am attempting to retrieve data from a third-party API. While it functions properly on Postman, I am striving to successfully make a request and access the data within my React project. The public API in question is: https://api.securityscorec ...

javascriptreactjsaxios

Using $state.go within an Ionic application with ion-nav-view may cause unexpected behavior

I recently started working on an Ionic Tabs project. I have a button called "initiateProcess" that triggers some operations when clicked using ng-click. Within the controller, it performs these operations and then navigates to a specific state (tab.target) ...

javascriptangularjsionic-framework

Do we really need to implement ajax in this code snippet?

In my scenario, I have two JSP files named test1.jsp and test2.jsp. The flow of my program goes like this: I need to retrieve data from a textbox in test1.jsp, but the Ajax call is initiated from a different page. My objective is to receive the controller ...

javajavascriptjqueryajaxjsp