2017-03-01 5 views
0

私は「カード」のリストを持っています。これは、画面の左側にあるフィルタが選択されると、画面中央に表示されたカードがそれに応じて更新されます。ここでは、JSの抜粋です:二つの角度リストの更新が遅い

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

そして、ここでは、テンプレートの部分があります古い選択が削除される前の半分の時間、または古い選択が削除される前にカードがすべて統合されます。このすべては1秒の時間内に起こりますが、非常に専門的ではなく、醜いように見えます。

ユーザはフィルタを選択し、カードがすぐに非表示になり、新しいデータが取得され、新しいカードが表示されます。重複はなく、複数のグループはありません。

を$タイムアウト機能に非同期メソッド/成功をラップ:動作しませんでした。ここ

は、私がやっていることです。同じ結果。

$ scopeに非同期メソッド/成功をラップしました。$$ postDigest関数:動作しませんでした。同じ結果。

バックエンドに400msのスレッドスリープを追加:動作しますが、フロントエンドの問題のバックエンド修正を挿入しません。

divとmdカードにng-if/ng-showのさまざまな組み合わせを試しました。うまくいかなかった。同じ結果。

テンプレートはもともと〜500行でした。このカードのビットを除いて、余分なマークアップをすべて取り除いて、ダイジェストサイクルが長すぎるかどうかを確認しました。うまくいきませんでした。同じ結果。

ご協力いただければ幸いです。ありがとう!

+0

リストはどれくらい大きいですか? * ng-ifよりもクライアント側の 'filter'を使うのはなぜですか? – Claies

+0

また、 '.success()'を使わないでください。 '.then()'を使うべきです。 http://stackoverflow.com/questions/35329384/why-are-angular-http-success-error-methods-deprecated-removed-from-v1-6 – Claies

+0

DBの構造と関連するフィルタには、クライアント側のフィルタを行う方法はありません。毎回DBから項目を検索(クラスで検索、日付範囲で検索、一般検索)しなければなりません。アイテム数は?ローカル/ QAの場合は、一握りです。生産に何百人もの人がいる。 – dangerisgo

答えて

0

ワウ。私の同僚と私はちょうど問題のリストに影響を与えていた、本当に古い、埋められたCSSアニメーションを見つけました。それらを削除した後、すべてが正常に動作します。ドー!私は@ The.Bearと@JBNizetに感謝したいと思います。これについて私は正しい方向に向いています!

関連する問題