Angular沒有更新列表足夠快

我有一張'卡片'列表，當在屏幕左側選擇一個過濾器時，屏幕中間顯示的卡片會相應地更新。這裏是JS的一個片段：Angular沒有更新列表足夠快

$scope.isReady = false; 

// This is an async method to retrieve from DB   
AssignmentManagerService.getAssignmentsForClass(teacherId, classId).success(function(response) { 

    var instances = response.instances; 
    $scope.assignmentListData = instances; 
    $scope.isReady = true; 
});

，這裏是一塊模板：

<div flex class="item-list" ng-if="isReady"> 
    <md-card ng-repeat="assign in assignmentListData track by assign.instanceId" 
     ng-click="selectCard(assign)" 
     class="item-list-item" 
     style="font-size:16px;" 
     ng-class="getCardClass(assign)" 
     ng-style="getCardStyle(assign)"> 

     <div> 
      <span style='font-weight:500'>Title</span>: {{assign.title}} 
     </div> 

     <div style="margin-top:10px;"> 
      <span style='font-weight:500' ng-if="assign.availableDate">Available Date:</span> {{assign.availableDate | date:'fullDate'}} 
      <span style='font-weight:500' ng-if="assign.createDate">Create Date:</span> {{assign.createDate | date:'fullDate'}} 
     </div> 
    </md-card> 
</div>

一兩件事情會發生：我將在得到的每一個頂部的卡兩個部分其他的一部分選擇舊選擇，一部分選擇新選項，在刪除舊選擇前半秒鐘，或者在舊牌被移除之前全部被集成。所有這一切發生在一秒鐘的時間內，但看起來非常不專業和醜陋。

應該發生的事情是，用戶做出過濾器選擇，立即隱藏卡片，檢索新數據，並顯示新卡片。沒有重疊，沒有多個組。

這裏是我做了什麼：

包裹異步方法/成功爲$超時功能：沒有工作。相同的結果。

將異步方法/成功包裝到$ scope中$$ postDigest函數：沒有工作。相同的結果。

在後端增加了一個400ms的線程睡眠：雖然它可以工作，但我並未爲前端問題插入後端修復程序。

嘗試了div和md卡上ng-if/ng-show的各種組合：沒有工作。相同的結果。

該模板最初〜500行。我已經除掉了這個卡位以外的所有無關標記，看看它是否是消化週期花費太長時間。沒有工作。相同的結果。

任何幫助將不勝感激。謝謝！

來源

2017-03-01 dangerisgo

列表有多大？爲什麼不檢索*整個*列表，並使用客戶端過濾器而不是'ng-if'？ – Claies

也不應該使用'.success（）'，你應該使用'.then（）'。 http://stackoverflow.com/questions/35329384/why-are-angular-http-success-error-methods-deprecated-removed-from-v1-6 – Claies

隨着數據庫的構建方式和涉及的過濾器，沒有辦法做一個客戶端過濾器。它必須每次從數據庫中檢索項目（按類別搜索，按日期範圍搜索，一般搜索）。至於多少項目？對於本地/ QA，少數。生產可能有數百個。 – dangerisgo

哇。我的同事和我剛剛發現了一些非常古老和埋藏的CSS動畫，這些動畫正在影響有關列表。刪除它們之後，一切都按原樣運行。衛生署！我想感謝@ The.Bear和@JBNizet指引我在這個正確的方向！

來源

2017-03-02 20:07:00 dangerisgo

Angular沒有更新列表足夠快

回答

相關問題