将 ngAnimate 与 ngRepeat 一起用于拼接元素
Using ngAnimate with ngRepeat with spliced elements
我正在使用 Angular 和 SignalR 开发概念验证 SPA 网络应用程序。我希望我的客户端应用程序为使用 ngRepeat
生成的 ngAnimate
插入到列表中的新项目设置动画。
在我以这种方式插入新项目之前:
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
正在对最后一行进行动画处理,直到它被从列表中拼接出来,因为列表太长了。如何仅对拼接在列表开头的新项目进行动画处理?
为列表中的第一项创建新的 class。尝试 css3 位置规则来指定第一个 child。仅动画 css class.
我已经找到解决这个问题的方法,所以我会 post 在这里以防其他人遇到同样的问题。
我所做的只是创建一个名为 'reverse' 的自定义 Angular 过滤器,用于使用 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 类 中获益。
我正在使用 Angular 和 SignalR 开发概念验证 SPA 网络应用程序。我希望我的客户端应用程序为使用 ngRepeat
生成的 ngAnimate
插入到列表中的新项目设置动画。
在我以这种方式插入新项目之前:
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
正在对最后一行进行动画处理,直到它被从列表中拼接出来,因为列表太长了。如何仅对拼接在列表开头的新项目进行动画处理?
为列表中的第一项创建新的 class。尝试 css3 位置规则来指定第一个 child。仅动画 css class.
我已经找到解决这个问题的方法,所以我会 post 在这里以防其他人遇到同样的问题。
我所做的只是创建一个名为 'reverse' 的自定义 Angular 过滤器,用于使用 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 类 中获益。