将ngAnimate与具有拼接元素的ngRepeat一起使用
Using ngAnimate with ngRepeat with spliced elements
我正在使用Angular和SignalR开发一个概念验证SPA web应用程序。我希望我的客户端应用程序为使用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
正在为最后一行设置动画,直到它从列表中拼接出来,因为列表太长。如何仅为列表开头拼接的新项目设置动画?
为列表中的第一项创建一个新类。尝试css3位置规则来指定第一个子项。只为该css类设置动画。
我已经找到了解决这个问题的方法,所以我会把它发布在这里,以防其他人遇到同样的问题。
我所做的只是创建一个名为"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类中获益。
相关文章:
- 转义符不能与innerHTML一起使用
- 如何使用ngrepeat和双向绑定获得指令的隔离范围
- 高亮显示与数组字符串一起使用时文本插件中断
- setTimeout可以与闭包内的函数一起使用吗
- 将依赖外部库的UMD模块与browserfy捆绑在一起
- Highcharts colorsByPoint与系列中的线性渐变一起使用时不起作用
- 如何将ngrepeat下的ngmodel绑定到$scope
- Angular ngRepeat:重复错误(尽管没有重复的密钥)
- 如何将js库与typescript一起使用
- 将webpack和babel与父项目目录中的文件一起使用
- 将 Drag&Drop 与 jsTree 和 DataTables 一起使用
- Javascript-如何让脚本与Ajax请求的数据一起运行
- 将两个ext.TabPanels滚动到一起
- 将jQuery UI Timepicker Addon与React一起使用
- 什么是curl以及如何将其与nodejs一起使用
- Javascript”;onmousemove”;事件无法与类一起使用
- 如何按对象反转Angular ngRepeat的顺序's键,这些键是数字键
- 将require('..')与变量一起使用与在webpack中使用字符串相比
- 将ngAnimate与具有拼接元素的ngRepeat一起使用
- AngularJS:如何将ngRepeat指令与数组和子数组一起使用