Question

我有一张卡片列表＆＃39;当在屏幕左侧选择过滤器时，屏幕中间显示的卡片将相应更新。这是js的片段：

$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>

将会发生以下两种情况之一：我要么将两个卡片放在一起，一个部分带有旧选择，一个部分带有新选择，在旧选择被删除之前半秒或者在旧卡被移除之前，所有卡都将被集成。所有这一切都发生在一秒钟的时间内，但看起来非常不专业和丑陋。

应该发生的是用户选择过滤器，卡片立即隐藏，检索新数据，并显示新卡片。没有重叠，没有多个组。

这就是我所做的：

将异步方法/成功包装到$ timeout函数中：没有用。相同的结果。

将异步方法/成功包装到$ scope中。$$ postDigest函数：没有工作。相同的结果。

在后端添加了400毫秒线程休眠：虽然它确实有效，但我没有为前端问题插入后端修复程序。

在div和md-card上尝试了ng-if / ng-show的各种组合：没有用。相同的结果。

模板最初约为500行。我已经删除了除了这个卡位之外的所有无关标记，看看它是否是消化周期花了太长时间。没有工作。相同的结果。

非常感谢任何帮助。谢谢！

Answer 1

哇。我的同事和我刚刚发现了一些真正陈旧且隐藏的CSS动画，这些动画正在影响有问题的列表。删除后，一切正常。卫生署！我要感谢@ The.Bear和@JBNizet指出我正确的方向！

Angular没有足够快地更新列表

1 个答案: