Enhance the performance of ng-class in AngularJS when using ng-repeat with large datasets

I'm currently developing a project using angularJS. My goal is to display a specific part of the data within the main json dataset, which contains around 5000 to 9000 lines, on the view using ng-repeat. There's a table data tag that shows checkboxes or radio buttons using CSS images. Here's the code snippet:

<tr ng-repeat="o in main[menu].options" >
 <td style="width:10%;" class="radio" 
    ng-class="{checked: main[menu][active].active === o.instanceId}" 
    ng-click="main[menu][active].active = o.instanceId;"
    ng-if="menu === 'requiredOptionGroups'">
 </td>
 <td>..some other data...</td>
</tr>

For checkboxes:

<tr ng-repeat="o in main[menu].options" >
 <td style="width: 10%;" class="checkbox" 
    ng-class="{checked: o.preSelect == 'true'}"
    ng-click="o.preSelect = o.preSelect=== 'false'?'true':'false';"
    ng-if="menu === 'optionalOptionGroups'" ng-model="o.preSelect">
 </td>
 <td>..some other data...</td>
</tr>

The CSS classes for radio and checkbox are as follows:

.checkbox {
   cursor: pointer;
   background: url(./images/check_box_empty.png) no-repeat  center center;
   height: 22px;
   width: 22px;
   &.checked { background: url(./images/check_box_checked.png) no-repeat center center; }
    }
.radio {
   cursor: pointer;
   background: url(./images/radio_button_empty.png) no-repeat center center;
   height: 22px;
   width: 22px;
   &.checked { background: url(./images/radio_button_filled.png) no-repeat center center; }
}

The issue I'm encountering is a noticeable delay when users click the radio button or checkbox button before the checked image appears.

The code works well for smaller datasets.

Is there any workaround to overcome this delay? I've tried searching for ways to improve performance here, but we need to show all the data to the user.

Answer №1

Here is a suggestion for a small enhancement in the code that may potentially improve the application's speed. Assuming that your o.preSelect variable is a boolean and not a string:

You can consider replacing:

ng-class="{checked: o.preSelect == 'true'}"
ng-click="o.preSelect = o.preSelect=== 'false'?'true':'false';"

with:

ng-class="{checked: o.preSelect}"
ng-click="o.preSelect = !o.preSelect"

However, it is worth noting that with 9000 rows of table data, the browser may experience heavy processing load due to constant element manipulation.

Answer №2

Consider using ng-style instead of ng-class for faster performance with minimal overhead. Hopefully, this approach will become more common in the future. For more information, check out this article -

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

The overlay button is designed to start the video only when clicked on the center of the screen. However, if clicked on any other part of the video, it will stop

$(".video") .parent() .click(function () { if ($(this).children(".video").get(0).paused) { $(this).children(".video").get(0).play(); $(this).children(".playpause").fadeOut(); $("video").attr("controls", true); } else { $ ...

Is Utilizing a Factory Pattern to Showcase Application Navigation a Good Idea?

I am currently in the learning process and would greatly appreciate any feedback or suggestions for improvement. My goal is to create a navigation system for my Angular App using the service I have built. Here is a brief overview of the functionality I am ...

After updating AngularFire to version 0.5.0, a new problem arises: the calculation now results in

My experience with angularFire 0.5.0 has been disappointing lately, as nothing seems to be working correctly anymore. Just when I managed to fix an issue with removing a single item, another problem arose. Each individual item includes a date, description ...

Concluding Engagement After Announcing a Victor in a Virtual Competition

I have developed a straightforward JavaScript tic-tac-toe game that is functioning smoothly at the moment. The game involves an array that stores X's and O's, prevents the same spot from being selected twice, and determines the computer's mo ...

Can Vue.js 3 composition be leveraged with v-for to incorporate a query string into a router-link?

I have successfully implemented v-for for a URL path. Now, I am looking to merge the URL path with the query string in the router link tag. The query string will be the date from each item rendered by v-for. Is there a way to dynamically pass this query ...

Using PHP to insert CSS conditionally through an if statement

I am working with PHP to identify whether a user is accessing the website through a mobile device or desktop browser. Currently, I have it set up to display "yes" or "no," which is working correctly. However, I would like to apply specific CSS code based o ...

What is the best way to eliminate all whitespace in AngularJS binding strings?

I attempted the following: <div id="{{mystring.replace(/[\s]/g, \'\')}}"></div> However, it does not appear to be functioning as expected. The "mystring" object is located on the $scope and contains a string such as " ...

Using React to insert a link with JSX variables

When inserting normal HTML elements with React variables in JSX, there are a few ways to go about it. One option is to use the dangerouslySetInnerHTML attribute or you can utilize a package like html-react-parser from npm. The following code demonstrates ...

What is the best way to align my asp.NET panels in the center?

I am working with panels that have tables to organize textboxes and labels. I want to center them, but I am struggling to find the right attribute to use. I've attempted justifying them in the design view and using horizontalalign:center in HTML, but ...

The enigma of CSS: How is the width mysteriously set to 0px with no visible CSS styling

Take a look at this snapshot of a webpage I'm currently designing in Chrome Developer Tools: https://i.sstatic.net/SB00j.png The primary rule in the 'Matched CSS Rules' section indicates that the width of the element should be 160px. Howe ...

Top method for individually choosing multiple selections from a foreach loop output

Need help with a loop: foreach ($userItems_get as $item => $value) { if ($value['prefab'] == 'wearable') { echo $value['name'] . "</br>"; echo "<img src=\"{$value['image_invent ...

Sliding through HTML content

Unfortunately, I lack expertise in advanced HTML and CSS. After some investigation, I attempted to create a "content slider" similar to the one on the Redlight Traffic website (an anti-human trafficking organization). However, my efforts have been unsucces ...

The Prism code block disrupts the fluidity of responsive design (which utilizes flexbox)

I created a design for a webpage that is fully responsive and adjusts smoothly to smaller screens. However, when I inserted a code block (and used prism.js to format it), the responsiveness of the layout was compromised. The code box and text content overf ...

How can I use jQuery to automatically change the background color of each item to match the color of the next

I have a list with 4 items, each item has a specific background color set in the style attribute. <div class="list"> <div style="background: red"></div> <div style="background: blue"></div> <div style="background: gr ...

The display of treepanel response text on an extjs grid within a layout-browser is achieved through the use of the

I am attempting to showcase an ExtJS grid and tree within a layout-browser. The tree's response data is displayed in the ExtJS grid, which then dynamically refreshes. My goal is that when I click on a tree leaf, the data from that leaf should be displ ...

Positioning Anchors in HTML Tables within the Viewport: A Comprehensive Guide

I am utilizing anchor elements within an HTML table and aiming to incorporate some spacing at the top of the viewport. I have discovered that by placing the anchor inside a dummy DIV element within the TD, I can achieve this. However, my goal is also to hi ...

When attempting to transfer data from an Ajax HTML form to a Flask template in Python upon clicking a button, encountered difficulties

I am a beginner with Flask and HTML. I need some help as I am struggling to retrieve parameter values from the HTML form (index1.html). Here is my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

Jumping occurs in Slick Carousel when adjusting the width of the active slide

Check out the fiddle link here: http://jsfiddle.net/br24p3Lr/ I've been attempting to perfect the animation when transitioning to a new active slide. Despite trying various approaches to resolve this issue, I seem to be stuck at the moment. The foll ...

Tips for generating dynamic datepickers using AngularJS

When using my AngularJS application, I display a modal window for editing an event and adding/removing event dates (utilizing Bootstrap datepicker and timepicker). The event already has some fixed dates, which is not an issue since I have them created and ...

How can one choose an HTML element and then select another nested element using XPath?

Is there a way to target the div element "fc-event-time", and then select the next nested div element that is located at the same level? After identifying the text 1p - 2p within this snippet of HTML, how can I access the users' names? Here's t ...