AngularJS修复了更新内容的列表

Question

我需要一些关于如何解决以下问题的灵感：

我正在使用AngularJS制作信息监视器。

监视器应列出最多6行信息。

新行总是放在其他行的顶部并从顶部推入。如果已有6行，则最后一行将从底部推出。

在任何给定时间，行可能会从列表中消失。

从视觉上来说，我非常希望它能够滚动，所以当要显示一个新行时，它会从顶部滑入，所有项目都会向下滑动一行。

我不确定如何实现上述内容。我考虑过ng-repeat，但我不知道在元素出现或被删除时如何移动项目。

我希望有人能给我一些建议。

Answer 1

你想要看一下ngAnimate。它内置支持使用ng-repeat，包括添加和删除列表中项目的动画。

https://docs.angularjs.org/api/ngAnimate

与ngRepeat集成的文档位于：https://docs.angularjs.org/api/ng/directive/ngRepeat#animations

Answer 2

要在顶部列表中添加新项目，请使用javascript的unshift方法。例如：

$scope.list = [1,2,3,4,5,6];

$scope.list.unshift(9); // [9,1,2,3,4,5,6];
$scope.list.pop(1);     // [9,2,3,4,5,6];

请记住，在$ scope of list中添加和删除项目以便更新她。

compile project(':ParseLoginUI')

在HTML中，继续正常使用ng-repeat