Question

我正在使用Angular和SignalR开发概念验证SPA网络应用程序。我希望我的客户端应用使用ngAnimate生成的使用ngRepeat插入到列表中的新项目设置动画。

在我以这种方式插入新项目之前：

signalRhub.client.broadcastData = function (data) {
                    $scope.customers.push(data);
                    $scope.$apply(); 
                };

但是现在我想在列表顶部而不是在底部插入新项目，如果列表超过五个项目，则删除列表的最后一项：

signalRhub.client.broadcastData = function (data) {
                    $scope.customers.splice(0, 0, data);
                    if ($scope.customers.length > 5) { $scope.customers.splice(5, 1); }
                    $scope.$apply(); 
                };

观点：

<tr class="customerList" ng-repeat="customer in customers track by $index">
    <td style="font-size:x-large; width:50%">
        {{customers.customerId}}
    </td>
    <td style="font-size:x-large; width:50%">
        {{customers.appointments[0].appointmentId}}
    </td>
</tr>

CSS：

.customerList.ng-enter {
    transition:1s linear all;
    opacity:0;
}
.customerList.ng-enter-active {
    opacity: 1;
}

.customerList.ng-leave-active {
    opacity:0;
}

这个问题是ngAnimate动画最后一行，直到它被拼接出列表，因为列表太长了。如何仅在列表的开头为拼接的新项目设置动画？

Answer 1

为列表中的第一项创建一个新类。尝试css3位置规则来指定第一个孩子。只有动画那个css类。

Answer 2

我找到了解决这个问题的方法，所以我会在这里发布，以防其他人遇到同样的问题。

我所做的只是创建一个名为“reverse”的自定义角度过滤器，用于使用ngRepeat枚举列表，并在列表顶部添加新条目：

<强>控制器：

signalRhub.client.broadcastData = function (data) {
                    $scope.customers.push(data);
                    $scope.$apply(); 
                };

过滤

function (eventsApp) { 'use strict'; app.filter('reverse', function () { return function (items) { return items.slice().reverse(); }; }); });

<强> HTML：

<tr class="customerList" ng-repeat="customer in customers | reverse"> <td style="font-size:x-large; width:50%"> {{customers.customerId}} </td> <td style="font-size:x-large; width:50%"> {{customers.appointments[0].appointmentId}} </td> </tr>

这样就可以从ngAnimate生成的CSS类中受益。

将ngAnimate与ngRepeat一起使用，并使用拼接元素

2 个答案: