AngularJS проблема производительности нг-модель против нг-класс и т.д.

Question

У меня есть список с нг-повтором в угловом и кнопках, которые переключать проверяемое свойство во всех элементах (1.4):

<button ng-click="selectAll()">select all</button> 

примером 1:

<li ng-repeat="item in items"> 
    <input type="checkbox" ng-model="item.checked"> {{ item.name }} 
</li> 

пример 2:

<li ng-repeat="item in items"> 
    <span class="glyphicon" ng-class="{'glyphicon-ok': item.checked}"></span> {{ item.name }} 
</li> 

пример 3:

<li ng-repeat="item in items"> 
    <span class="glyphicon glyphicon-ok" ng-show="item.checked"></span> {{ item.name }} 
</li> 

Пример 4:

<li ng-repeat="item in items"> 
    <span>{{ item.checked }}</span> {{ item.name }} 
</li> 

Производительность примера 1 и 4 ОК. Но пример 2 и 3 имеет почти 1 сек. лаг. В массиве около 200 элементов.

Почему производительность настолько отличается? Я хотел бы иметь собственные «галочки» с glyphicon - так что я хотел бы иметь пример 2 работы, но производительность плохо

Answer 1

Вы можете попробовать следующее, например, 2:

<li ng-repeat="item in items track by item.checked"> 
    <span class="glyphicon" ng-class="{'glyphicon-ok': item.checked}"></span> 
    {{ item.name }} 
</li> 

Для примера 3, попробуйте следующее:

<li ng-repeat="item in items track by item.checked"> 
    <span class="glyphicon glyphicon-ok" ng-if="item.checked"></span> {{ item.name }} 
</li>