在大數據的ng-repeat性能下提高角度js ng級性能

Question

我正在開發一個angularJS項目。我正在使用ng-repeat在視圖中顯示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> 

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會一個布爾值，而不是字符串）

更換

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行表瀏覽器有很多要做的元素更改...

Answer 2

用ng樣式替換。它比ng-class要快得多，並且引入了很少的開銷。希望將來它會改變。閱讀此處以獲取解釋 - http://ng-perf.com/2014/10/29/tip-3-ng-style-is-much-faster-than-ng-class/