Angular slow ng-repeat: Is there a way to refresh unique items manually

advertisements

My ng-repeat takes 3.5 seconds to load 850 items:

<ol class="tasks">
    <li class="task-item"
        ng-class="{completed: task.isCompleted}"
        ng-repeat="task in (filteredTasks = (tasks | filter: search | orderBy:'order' | limitTo:1250))"
        data-order="{{task.order}}"
            data-id="{{::task.id}}">
        <div class="drag-handle color-1 " data-original-title=" "></div>
        <div class="title-container">
            <a class="title-link" ng-click="showTaskDetails(task)" ng-bind="task.title">
            </a>
        </div>

        <div class="tree" ng-class="tree(task)"></div>

        <div class="check" ng-class="check(task)" ng-click="setCheck(task)"></div>

        <div class="actions">
            <a ng-click="setBucket(task, 1)" ng-class="{selected: task.bucketId === 1}" translate-once="MAIN_TOGGLEBUCKET_TODAY">T</a>
            <a ng-click="setBucket(task, 2)" ng-class="{selected: task.bucketId === 2}" translate-once="MAIN_TOGGLEBUCKET_TOMORROW">W</a>
            <a ng-click="setBucket(task, 3)" ng-class="{selected: task.bucketId === 3}" translate-once="MAIN_TOGGLEBUCKET_FOREST">F</a>
            <a ng-click="setBucket(task, 4)" ng-class="{selected: task.bucketId === 4}" translate-once="MAIN_TOGGLEBUCKET_GREENHOUSE">G</a>
        </div>
    </li>
</ol>

I tried different improvements. I played with bindonce library until I realized it was added natively to Angular 1.3. I started using translate-once to remove watchers from translated text. Still I experience slowness when loading 850 items. Is there a way to remove most of the watchers and repaint the UI manually per ng-repeat row (when I detect a change)?


If there is no need to display all at once, you can load 50 by 50.

<ol class="tasks" ng-init="lmt = 50">
 <li class="task-item"
    ng-class="{completed: task.isCompleted}"
    ng-repeat="task in (filteredTasks = (tasks | filter: search | orderBy:'order' | limitTo:lmt))"
    data-order="{{task.order}}"
        data-id="{{::task.id}}">
  ....
</li>
<li>
  <button class="btn-block btn btn-primary" ng-click="lmt=lmt+50">MORE.....</button>
</li>