improve angular js ng-class performance under ng-repeat performance for large data

Question

I am working on an angularJS project. I am trying to display a part of data within the main json data with 5000 to 9000 lines in the view using ng-repeat. There is a table data tag which is used to show checkbox or radio button using the css image the code is as follows.

<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 check box:

<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 is 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 am facing is that when user tries to click the radio button or check box button there is noticeable delay before the checked image is shown.

The code works fine for much smaller data .

Is there any work around so that i can overcome the delay. I have searched to improve the performance at link but we have to show all data to the user

I know it's not what you asked, but try using ng grid, it's optimized just for this, it shows only ~30 rows from the whole data set with a virtual scrolling and render as you scroll, can easily show 10k+ rows without breaking a sweat. [ng-grid](http://angular-ui.github.io/ng-grid/) Might as well try their new version. — PiniH, Oct 29 '14 at 12:44

score 0 · Answer 1 · answered Mar 27 '14 at 07:01

0

One small improvement, don't know whether it will speed up the application, could be (going from assumption that your o.preSelect is a boolean and not a string)

replace

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"

But with 9000 rows of table the browser has a lot to do changing the elements...

answered Mar 27 '14 at 07:01

przno

3,476
4
31
45

Actually the main json data is got by converting a large xml file to json. It does not preserve the data types so it is used as a string. – user3409862 Mar 27 '14 at 07:26

score -1 · Answer 2 · answered Oct 29 '14 at 12:42

-1

Replace with ng-style. It is much faster than ng-class and introduces very little overhead. Hopefully it will change in future. Read this for an explanation - http://ng-perf.com/2014/10/29/tip-3-ng-style-is-much-faster-than-ng-class/

answered Oct 29 '14 at 12:42

Ambika Sukla

244
4
3

2

Link's dead. That why we need the explanation in your answer: to not get your hopes up and find out the source is dead. – Tom May 03 '17 at 13:49

improve angular js ng-class performance under ng-repeat performance for large data

2 Answers2