html - 在大数据的 ng-repeat 性能下提高 angular js ng-class 性能

Question

我正在做一个 angularJS 元素。我正在尝试使用 ng-repeat 在 View 中显示 5000 到 9000 行的主要 json 数据中的一部分数据。有一个表格数据标签，用于使用 css 图像显示复选框或单选按钮，代码如下。

<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>

对于复选框:

<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>

radio 和 checkbox 的 css 类如下:

.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; }
}

我面临的问题是，当用户尝试单击单选按钮或复选框按钮时，在显示选中的图像之前会有明显的延迟。

该代码适用于小得多的数据。

是否有任何解决方法可以克服延迟。 我已在 link 搜索以提高性能但我们必须向用户显示所有数据

Answer 1

一个小的改进，不知道它是否会加速应用程序，可能是(假设你的 o.preSelect 是一个 bool 值而不是一个字符串)

替换

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

与

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

但是对于 9000 行的表格，浏览器需要做很多更改元素的工作...